angularjs – 倒计时组件:如何防止Angular2中的重新渲染?
我有一个Angular2主组件,它包含许多子组件和一个独立的倒计时组件(在下面的代码中命名为“clock”).倒计时组件每秒更改它的标签,这会导致主组件和所有其他组件(不必要地)重新渲染.我怎么能防止这种情况?
这是我的倒计时组件的来源: import {Component,Input} from 'angular2/core'; @Component({ selector: 'clock',template: ` <span> {{caption}} </span> ` }) export class ClockComponent { public caption; @Input('seconds') seconds :number = 0; constructor() { var self = this; setInterval(function(){ self.seconds--; self.caption = self.getCaption(self.seconds); },1000); this.caption = this.getCaption(this.seconds); } getCaption (seconds): string { let h = Math.floor(seconds / (60*60)); let m = Math.floor((seconds - 60 * 60 * h) / 60); let s = seconds % 60; return ((h < 10) ? '0' : '') + h + ':' + ((m < 10) ? '0' : '') + m + ':' + ((s < 10) ? '0' : '') + s ; } } 你可以想象它和“my-app”中的其他人一起被嵌入;就像是: <clock [seconds]="1800"></clock> <other-comps>...</other-comps>... 编辑(每条评论): 编辑(2): 以下是吸虫:http://plnkr.co/edit/PwBfUQXyZyTrqPaqrwRm?p=preview 启动控制台并观察六个“q-nav被选中?”每秒出现一次(从qnav组件打印). 解决方法
这是在每个事件上调用的Angulars更改检测(调用回调的setInterval也是这样的事件).
您可以将检测更改为OnPush,因此更改检测仅在更新@Input()或明确调用更改检测时发生,例如通过调用ChangeDetectorRefs上的方法 import {Component,Input,OnInit,EventEmitter,Output,OnChanges,ChangeDetectionStrategy} from 'angular2/core'; @Component({ selector: 'q-nav',template: ` <span *ngFor="#a of currAnswers; #i = index" class="aii-qn" [class.selected]="isSelected(i)" (click)="onSelect(i)"> <span class="badge">{{ i+1 }}</span> ? </span> `,styles: [` .aii-qn { color: #0000ff; cursor: pointer; font-size: 2rem; } .selected { border: black solid 2px; } `],changeDetection: ChangeDetectionStrategy.OnPush }) 有关详细信息,请参阅http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- jmeter常用四种断言
- XFire 最新生火指南(上)
- Angular2,Gulp,SystemJS – >默认扩展问题
- scala – 安装Typesafe Stack 2.0时`g8`做了什么
- webservice 中 String[], List , ArrayOfString的处理!
- bootstrap-4 – 如何启用新的.bg-gradient-utilities?
- AngularJS:使用$location避免使用url编码
- docker – kubernetes不能拉当地形象
- webService学习(三)webService发布到tomcat
- angularjs – 如何在angular-ui-router中的$state.go()中传