我有一个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>...
编辑(每条评论)：
当我的意思是重新渲染时,会发生这种情况：
我已经在各种渲染操作中向其他组件添加了console.log打印输出(导航和问题,请参见下图),例如,组件具有类绑定器,例如：
[class.selected] = “isSelected”
我已经将console.log()添加到了isSelected()方法中,因此每次倒计时(时钟)刷新时都可以发现它每隔一秒被调用一次.我想倒计时更改标签(从例如30分钟开始倒计时),不会影响导航和问题组件并导致它们重新渲染.
编辑(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
