Angular应用程序内的setInterval()导致无限UI重新渲染
Angular应用程序内的setInterval()导致无限UI重新渲染
提问于 2020-09-02 03:49:37
下面我在我的Angular 9应用程序中使用了一个非常简单的倒计时计时器。实际的倒计时计时器显示“天、小时、分钟、秒”的倒计时，并且应该每秒钟更新一次。
倒计时计时器在它自己的组件中，因为它在它自己的组件中，所以我预计当计时器的模板更新时，只会更新该组件。但是，我发现倒计时的父页面也在重新渲染。
我知道setInterval已经'monkey patched' by zone.js了，但是我找不到一种方法来保持倒计时计时器的反应性。
如有任何建议，我们将不胜感激
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'app-countdown',
template: `<h2>{{counter}}</h2>`
})
export class CountdownComponent implements OnInit, OnDestroy {
counter = 0
interval;
ngOnInit() {
this.startCountDown();
}
ngOnDestroy() {
clearInterval(this.interval);
}
startCountDown() {
this.interval = setInterval(() => {
this.counter++;
},1000)
}
}
回答 1
Stack Overflow用户
发布于 2020-09-02 11:01:03
可以在角度区外运行interval，然后手动检测更改：
startCountDown() {
this.zone.runOutsideAngular(() => {
this.interval = setInterval(() => {
this.counter++;
this.changeDetectorRef.detectChanges();
},1000)
});
}但在这个具体的例子中，我可能会使用普通的Javascript来更新值：
startCountDown() {
this.zone.runOutsideAngular(() => {
this.interval = setInterval(() => {
this.counter++;
this.elementRef.nativeElement.querySelector('h2').innerHTML = this.counter;
},1000)
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63694509
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号