还记得大明湖畔的$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(); // 要多加一行这个 执行一次变化检测
})
}
}
网友评论