问题起源

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)事件,例如 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();
    });
  }
  ...
}

总结

  • 平时多注意知识积累,不能按照网上说的解决方案复制过来就解决了,遇到简单问题这样是没有问题的,遇到复杂的就没办法了;
  • 当设置为Onpush策略时,要更加注意,用OnPush就是要减少变更检测的次数,就不要无论什么情况都detectChanges,或markForCheck,失去了意义,还是要规范使用;
  • 要优雅实现代码,项目中居然还看到把父组件的ChangeDetectorRef作为输入属性传到子组件中,一看就不懂变更检测啊;

以上就是详解Angular组件数据不能实时更新到视图上的问题的详细内容,更多关于Angular组件数据实时更新视图的资料请关注Devmax其它相关文章!

详解Angular组件数据不能实时更新到视图上的问题的更多相关文章

  1. Android Studio是否支持用于Android UI设计的AngularJS?

    我对AndroidStudio有疑问:AS在设计XML文件时是否支持AngularJS代码,例如:对于小动画或效果?

  2. android – 如何使用ClientID和ClientSecret在Phonegap中使用Angularjs登录Google OAuth2

    我正尝试使用Angularjs(使用IonicFramework)通过GoogleOAuth2从我的Phonegap应用程序登录.目前我正在使用http://phonegap-tips.com/articles/google-api-oauth-with-phonegaps-inappbrowser.html进行登录.但是当我使用Angular-UI-RouterforIonic时,它正在创建非常

  3. Thinkphp5框架实现获取数据库数据到视图的方法

    这篇文章主要介绍了Thinkphp5框架实现获取数据库数据到视图的方法,涉及thinkPHP5数据库配置、读取、模型操作及视图调用相关操作技巧,需要的朋友可以参考下

  4. 利用require.js与angular搭建spa应用的方法实例

    这篇文章主要给大家介绍了关于利用require.js与angular搭建spa应用的方法实例,文中通过示例代码给大家介绍的非常详细,对大家的理解和学习具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。

  5. 详解Angular动态组件

    本文主要介绍了Angular动态组件,对此感兴趣的同学,可以亲自实验一下。

  6. 详解如何使用webpack+es6开发angular1.x

    本篇文章主要介绍了详解如何使用webpack+es6开发angular1.x,具有一定的参考价值,有兴趣的可以了解一下

  7. angular2系列之路由转场动画的示例代码

    本篇文章主要介绍了angular2系列之路由转场动画的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. 一种angular的方法级的缓存注解(装饰器)

    本篇文章主要介绍了一种angular的方法级的缓存注解(装饰器),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. 动手写一个angular版本的Message组件的方法

    本篇文章主要介绍了动手写一个angular版本的Message组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】

    这篇文章主要介绍了Laravel框架基础语法与知识点整理,包括模板变量、输出、include引入子视图等相关操作技巧,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部