问题起源
MainComponent：
@Component({
selector: 'main',
template: `
<MenuComponent [isReport]="isReport">
</MenuComponent>
`,
changeDetection:ChangeDetectionStrategy.OnPush
})
export class MainComponent {
...
}
现在有一个 MainComponent ，我需要在这个组件中引用一个另一个组件 MenuComponent 。
import { Component, Input} from '@angular/core';
import { Subject, debounceTime } from 'rxjs';
@Component({
selector: 'movie',
styles: ['div {border: 1px solid black}'],
template: `
<div (mouseover)="mouseOver()">
<h3>{{ menu }}</h3>
</div>`
})
export class MovieComponent {
@Input() isReport: boolean = false;
menu: string = '我是Menu';
mouseOver$: Subject<any> = new Subject();
ngOnInit(): void {
this.mouseOver$.pipe(debounceTime(250)).subscribe((data) => {
this.menu = 'New: ' + this.menu;
});
}
mouseOver(): void {
this.mouseOver$.next(this.menu);
}
}
这个 MenuComponent 在其他的页面使用起来是正常的，而且因为是 Menu 组件，所以上面很有多 mouseover 事件，这些事件也可以正常工作。但，这个 MenuComponent 放在 MainComponent 中， mouseover 事件就有问题了，调试了下 mouseover 事件，代码都正确执行了，感觉代码并没有什么问题。因为这个组件放在其他页面里，行为完全正常，所以感觉不是组件本身的问题。
表现的现象是 ：
Menu里的 mouseover 行为很怪异，你over到A的时候，显示的是B的数据，当你over到B的时候显示的是A的数据，整个错乱了。
第一反应就是，这会不会是和 MainComponent 中的 mouseover 事件冲突了呢？
检查了一遍，没有发现问题所在。但是有意外收获，啊啊啊， MainComponent 组件使用的是 OnPush 变更检测策略，难怪其他页面都好使，就这个地方有问题了。好了，问题应该就是 OnPush 造成的。关于变更检测策略的，那还不是手到擒来，在熟悉不过了，来来来，一起简单看一下这个OnPush。
OnPush策略
Angular有两种变更检测的策略，一种是Default，另一种就是这个OnPush。OnPush这个变更检测策略主要为了改善性能。当我们设置组件装饰器的 changeDetection为OnPush 的时候， Angular 每次触发变更检测后会跳过该组件和该组件的所以子组件变化检测 。
好了，我们也知道什么是OnPush变更检测策略了，它会跳过当前组件和其子组件的变更 检测。也就是说，你改变这个组件的属性值，但这些属性值并不会更新到视图上，也就是组件数组和视图不一致。那我们知道了这一点，再回去看一下 MenuComponent 。
由于 MainComponent 的变更策略设置为了 OnPush ，他的子组件的变更检测策略会跳过，也就是 MenuComponent 变更检测不起作用了。但是，你会发现当你操作Menu的时候视图还是会有变化的。这是怎么回事？
大部分人可能花一分钟了解了 OnPush 是什么，但是没有了解透彻。继续往下看。
在 OnPush 策略下，以下这种情况会触发组件的变化检测：
当前组件或子组件之一触发了事件
如果 OnPush 组件或其子组件之一触发（ DOM/BOM ）事件，例如 click ， mouseover ， mouseleave ， resize , keydown ，则将触发变化检测（针对组件树中的所有组件）。
需要注意的是在 OnPush 策略中，以下操作不会触发变化检测：
setTimeout() setInterval() Promise.resolve().then() this.http.get('...').subscribe()原来如此，尽管是 OnPush 策略，但是 DOM/BOM 事件还是会触发变更检测的，所以 MenuComponent 的视图还是会有变化的，也就是这个变更检测是起作用的。但问题还是没有解决，Menu mouseover的时候还是会错乱啊！再来看一下代码。
ngOnInit(): void {
this.mouseOver$.pipe(debounceTime(250)).subscribe((data) => {
this.menu = 'New: ' + this.menu;
});
}
引起问题的地方就是这 debounceTime ，这个之前在介绍Rxjs原理的时候，说过这个是异步的。之前掌握的东西，终于派上用场了。
总结一下，就是 mouseover 是异步的，会触发变更检测，但是由于 debounceTime 是异步又嵌套了一下， debounceTime 一般是用 setTimeout 来实现的。所以， debounceTim e里的数据变化并不能及时的显示到视图中。终于找到问题的根源了。啦啦啦。问题找到了，那解决起来多easy啊。它不是不会触发变更检测吗，我就手动让它触发一下吧。
import { Component, Input, ChangeDetectorRef } from '@angular/core';
import { Subject, debounceTime } from 'rxjs';
@Component({
selector: 'movie',
styles: ['div {border: 1px solid black}'],
template: `...`
})
export class MovieComponent {
...
constructor(private cd: ChangeDetectorRef){}
ngOnInit(): void {
this.mouseOver$.pipe(debounceTime(250)).subscribe((data) => {
this.menu = 'New: ' + this.menu;
this.cd.detectChanges();
});
}
...
}
总结
平时多注意知识积累，不能按照网上说的解决方案复制过来就解决了，遇到简单问题这样是没有问题的，遇到复杂的就没办法了； 当设置为 Onpush 策略时，要更加注意，用 OnPush 就是要减少变更检测的次数，就不要无论什么情况都 detectChanges ，或 markForCheck ，失去了意义，还是要规范使用； 要优雅实现代码，项目中居然还看到把父组件的 ChangeDetectorRef 作为输入属性传到子组件中，一看就不懂变更检测啊；以上就是详解Angular组件数据不能实时更新到视图上的问题的详细内容，更多关于Angular组件数据实时更新视图的资料请关注其它相关文章！
查看更多关于详解Angular组件数据不能实时更新到视图上的问题的详细内容...