倒计时组件：如何防止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>...
编辑（每条评论）：当我指的是重新渲染时，会发生这种情况：我在各种渲染操作上将console.log打印输出添加到其他组件（导航和问题，请参见下图），例如，一个组件具有一个类绑定器，例如：[class.selected] =“ isSelected”，我已经将console.log（）添加到isSelected（）方法中，因此可以发现每次倒数（时钟）每秒钟调用一次刷新自己。我希望倒计时可以更改标签（例如从30分钟开始倒计时），而又不影响导航和问题组件并使它们重新呈现。
编辑（2）：
这是the人：http ://plnkr.co/edit/PwBfUQXyZyTrqPaqrwRm?p=preview
启动控制台，并注意六个“ q-nav isSelected？”。每秒出现一次（从qnav组件打印）。
贡特·佐赫鲍尔（GünterZöchbauer）
这是在每个事件上调用的Angular的更改检测，而setInterval调用回调就是这样的事件。
您可以将变更检测切换为，OnPush以便变更检测仅在@Input()更新或显式调用变更检测时才发生，例如，通过调用on上的方法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
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
angularJS 2 中的倒计时功能
- 2
如何在反应中显示倒计时/倒计时
- 3
Ionic 2 倒计时
- 4
如何使Swift倒计时
- 5
如何停止倒计时？
- 6
页面重新加载jQuery倒计时
- 7
如何停止在jQuery中运行倒计时？
- 8
SwiftUI —如何在ScrollView中显示倒计时？
- 9
倒计时后如何从 tkinter 中删除标签
- 10
如果我重新加载页面，倒计时将重新开始-如何设置修复
- 11
Unity：重新加载时如何开始我的武器重新加载倒计时？
- 12
如何使用NSTimer进行倒计时？
- 13
如何使用角度使秒数倒计时？
- 14
如何更新倒计时时间？
- 15
如何使setInterval倒计时工作？
- 16
如何进行倒计时？
- 17
NodeJS 倒计时：如何定义分钟？
- 18
如何做倒计时算法
- 19
如何使用 time() 进行倒计时
- 20
如何倒计时过期日期
- 21
如何创建炸弹倒计时？
- 22
在Java中运行字符倒计时？
- 23
DispatcherTimer中的延迟倒计时
- 24
HTML 中的 JS 倒计时
- 25
文本颤动中的倒计时
- 26
每天倒计时
- 27
Perl：倒计时
- 28
Python倒计时
- 29
Perl：倒计时
我来说两句