为什么这个组件在这个简单的砰砰声中
@Component({
selector: 'my-app',
template: `<div>I'm {{message}} </div>`,
})
export class App {
message:string = 'loading :(';
ngAfterViewInit() {
this.updateMessage();
}
updateMessage(){
this.message = 'all done loading :)'
}
}
扔:
例外:表达式'I'm {{message}} in App@0:5'在被检查后发生了变化。之前的值:'I'm loading:('。当前值:'I'm all done loading:)' in [I'm {{message}} in App@0:5]
当我所做的一切都是更新一个简单的绑定时，我的视图被启动?
当前回答
简单:首先在你的组件结构中分离/移除变更检测，然后在ngAfterViewInit()方法中启用detectChanges()
constructor(private cdr: ChangeDetectorRef) {
this.cdr.detach() // detach/remove the change detection here in constructor
}
ngAfterViewInit(): void {
// do load objects or other logics here
// at the end of this method, call detectChanges() method.
this.cdr.detectChanges(); // enable detectChanges here and you're done.
}
其他回答
只需将代码移动到要更改共享服务主题的组件的构造函数中
我通过从angular core中添加ChangeDetectionStrategy来解决这个问题。
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'page1',
templateUrl: 'page1.html',
})
我认为最简单的解决方法如下:
Make one implementation of assigning a value to some variable i.e. via function or setter. Create a class variable (static working: boolean) in the class where this function exists and every time you call the function, simply make it true whichever you like. Within the function, if the value of working is true, then simply return right away without doing anything. else, perform the task you want. Make sure to change this variable to false once the task is completed i.e. at the end of the line of codes or within the subscribe method when you are done assigning values!
你也可以使用rxjs Observable创建一个计时器。定时器功能，然后更新消息在您的订阅:
Observable.timer(1).subscribe(()=> this.updateMessage());
为此，我尝试了上面的答案，其中许多在最新版本的Angular(6或更高版本)中都不起作用。
我正在使用材料控制，需要在第一次绑定完成后进行更改。
export class AbcClass implements OnInit, AfterContentChecked{
constructor(private ref: ChangeDetectorRef) {}
ngOnInit(){
// your tasks
}
ngAfterContentChecked() {
this.ref.detectChanges();
}
}
加上我的答案，这有助于解决一些具体问题。
