Angular开发组件数据不能实时更新到视图上怎么解决

这篇文章主要介绍“Angular开发组件数据不能实时更新到视图上怎么解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Angular开发组件数据不能实时更新到视图上怎么解决”文章能帮助大家解决问题。MainComponent：

@Component({
selector:'main',
template:`

	
`,
changeDetection:ChangeDetectionStrategy.OnPush
})
exportclassMainComponent{
...
}

现在有一个MainComponent，我需要在这个组件中引用一个另一个组件MenuComponent。

import{Component,Input}from'@angular/core';
import{Subject,debounceTime}from'rxjs';

@Component({
selector:'movie',
styles:['div{border:1pxsolidblack}'],
template:`

{{menu}}
`
})
exportclassMovieCompone免费云主机、域名nt{
@Input()isReport:boolean=false;
menu:string='我是Menu';

mouseOver$:Subject=newSubject();

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来实现的。所以，debounceTime里的数据变化并不能及时的显示到视图中。终于找到问题的根源了。啦啦啦。问题找到了，那解决起来多easy啊。它不是不会触发变更检测吗，我就手动让它触发一下吧。

import{Component,Input,ChangeDetectorRef}from'@angular/core';
import{Subject,debounceTime}from'rxjs';

@Component({
selector:'movie',
styles:['div{border:1pxsolidblack}'],
template:`...`
})
exportclassMovieComponent{
...

constructor(privatecd:ChangeDetectorRef){}

ngOnInit():void{
this.mouseOver$.pipe(debounceTime(250)).subscribe((data)=>{
this.menu='New:'+this.menu;

this.cd.detectChanges();
});
}

...
}

关于“Angular开发组件数据不能实时更新到视图上怎么解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注云技术行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: JavaScript最新版本更新到了哪些功能

这篇“JavaScript最新版本更新到了哪些功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScript最新版本更新到了哪些功能”文…