我有一个 Angular2 主组件,它包括许多子组件和一个独立的倒计时组件(在下面的代码中名为“时钟”)。倒计时组件每秒都会更改其标签,这会导致主组件和所有其他组件(不必要地)重新渲染。我怎样才能防止这种情况发生? 这是我的倒计时组件的来源:
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 ;
}
}
你可以想象它被嵌入到“我的应用程序”中;像这样的东西:
<clock [seconds]="1800"></clock>
<other-comps>...</other-comps>...
编辑(根据评论): 当我的意思是重新渲染时,会发生以下情况: 我在各种渲染操作上向其他组件(导航和问题,见下图)添加了一个 console.log 打印输出,例如,一个组件有一个类绑定(bind)器,例如: [class.selected]="isSelected" 并且我已经将 console.log() 添加到 isSelected() 方法中,因此可以发现它每隔一秒调用一次,每次倒计时(时钟)都会自行刷新。我希望倒计时更改标签(从例如 30 分钟开始倒计时)而不影响导航和问题组件并导致它们重新呈现。
编辑(2):
这里是 plunker:http://plnkr.co/edit/PwBfUQXyZyTrqPaqrwRm?p=preview
启动控制台并观察六个“q-nav isSelected?”每秒出现一次(从 qnav 组件打印)。
最佳答案
这是 Angular 的变化检测,在每个事件上调用,调用回调的 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
关于angularjs - 倒计时组件 : how to prevent re-rendering in Angular2?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36400421/