从Angular2中回调函数内改变数据但视图不能实时更新讲起

还记得大明湖畔的$scope.$apply吗,在angular1.x中,一些原生事件不触发脏检查时,就必须要调用$scope.$apply来告诉angular,我的数据变了,你能更新下view了......

如今angular发展到2.x了,为了追求最佳的性能,我在某组件中使用不可变对象(Immutable Objects)

不可变对象(Immutable Objects)
即当其内部的属性发生变化时,相对旧有的对象,我们将会保存另一份新的参照。它仅仅依赖输入的属性,也就是当输入属性没有变动(没有变动即没有产生一份新的参照),Angular将跳过对该组件的全部变化监测,直到有属性变化为止。

要使用不可变对象,只需如下设置changeDetection:

@Component({
  template: `
    <div>{{eData}}</div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
class Example {
  @Input() eData;
}

在组件Example中,只依赖输入属性eData,因为我们已经把变化监测策略设为了onPush,即若eData不发生变化,则angular跳过该组件的变化监测。

至此,回到标题所说的,当我更改数据时,angular的视图层没有发生改变的第一种情况:
使用不可变对象,但输入的是一个Observable,在此事件流回调中改变数据,如下代码

@Component({
  template: '{{num}}',
  changeDetection: ChangeDetectionStrategy.OnPush
})
class Example {

  @Input() addNumStream:Observable<any>;
  num = 0;

  ngOnInit() {
    this.addNumStream.subscribe(() => {
      this.num++; // application state changed
    })
  }
}

当有异步操作需要更新num的时候,会触发一个事件流,但输入属性addNumStream作为参考对象将不会更改,意味着该组件树的变化监测将不会发生,解决方法就是通过依赖注入给组件来引入一个ChangeDetectorRef,并标注组建树目录,告诉angular此处需要监测,具体方法见代码:

@Component({
  template: '{{num}}',
  changeDetection: ChangeDetectionStrategy.OnPush
})
class Example {
  constructor(private cdf: ChangeDetectorRef) {}    // 依赖注入ChangeDetectorRef
  @Input() addNumStream:Observable<any>;
  num = 0;

  ngOnInit() {
    this.addNumStream.subscribe(() => {
      this.num++; 
      this.cdf.markForCheck();    // 进行标注
    })
  }
}

说第二种情况前,简单谈谈zonejs
对angular2.x框架本身,如何知道数据是否已经处理处理完成,这份新的数据是否有变化,如果数据有变化,那是怎么来通知数据往下流入组件通知组件来改变视图等等问题,都能在zonejs中找到答案,因为zonejs是一个异步事件拦截器,提供了很多钩子,可以进入异步函数的执行上下文,并且‘十分暴力’的对很多js异步事件进行了包裹,以保证这些异步事件都在zone的执行上下文中,angular就能借此做它想要做的事情。
回到正题,即使这样,在某年某月的某一天,我调用百度地图的api时,在成功回调中修改数据居然没有触发视图更新.....到现在我只找到了解决方法(代码见下方),原因....或许有很多,有一点可以肯定的是,此回调脱离了angular的zone....具体为什么....可能这是个bug吧[捂脸]。

@Component({
  template: '{{num}}',
  changeDetection: ChangeDetectionStrategy.OnPush
})
class Example {
  constructor(private cdf: ChangeDetectorRef) {}    // 依赖注入ChangeDetectorRef
  @Input() addNumStream:Observable<any>;
  num = 0;

  ngOnInit() {
    this.addNumStream.subscribe(() => {
      this.num++; 
      this.cdf.markForCheck();    // 进行标注
      this.cdf.detectChanges();   // 要多加一行这个 执行一次变化检测
    })
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,196评论 6 13
  • angular提供了数据绑定的功能。所谓数据绑定就是将组件类的数据和页面的DOM元素关联起来。当数据发生变化时,a...
    oWSQo阅读 1,429评论 0 1
  • 组件基础 组件用来包装特定的功能,应用程序的有序运行依赖于组件之间的协同工作。组件是angular应用的最小逻辑单...
    oWSQo阅读 1,397评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,679评论 25 708
  • 【打卡项目】: 每天写500字以上的文章(结果每天写了快1000字) 【为什么要参加这个项目】 1.因为实在是拖欠...
    郭琳静Grace阅读 1,433评论 4 3