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

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

创新互联建站是专业的革吉网站建设公司,革吉接单;提供网站建设、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行革吉网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

问题起源

MainComponent:

@Component({
  selector: 'main',
  template: `
    
	  
 `,
  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: `
    
      

{{ menu }}

    
` }) export class MovieComponent {   @Input() isReport: boolean = false;   menu: string = '我是Menu';   mouseOver$: Subject = 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)事件,例如 clickmouseovermouseleaveresize, 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: 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();
    });
  }

  ...
}

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


网页标题:Angular开发组件数据不能实时更新到视图上怎么解决
转载来于:http://scyanting.com/article/ppihsh.html

其他资讯