触发Angular2手动更改检测
我正在编写一个具有Mode(): string属性的Angular 2组件。 我希望能够以编程方式设置此属性不响应任何事件。 问题是,如果没有浏览器事件,模板绑定{{Mode}}不会更新。 有没有办法手动触发这个变化检测?
尝试其中之一:
-
ApplicationRef.tick()– 类似于Angular 1的$rootScope.$digest()– 即检查完整的组件树 -
NgZone.run(callback)– 类似于$rootScope.$apply(callback)– 即评估Angular 2区域内的callback函数。 我想,但我不确定,这最终会在执行callback函数后检查完整的组件树。 -
ChangeDetectorRef.detectChanges()– 类似于$scope.$digest()– 即只检查这个组件及其子组件
您可以将ApplicationRef , NgZone或NgZone注入到组件中。
我使用了接受的答案参考,并希望举一个例子,因为Angular 2的文档非常难以阅读,所以我希望这很容易:
-
导入
NgZone:import { Component, NgZone } from '@angular/core'; -
将它添加到你的类的构造函数
constructor(public zone: NgZone, ...args){} -
用
zone.run运行代码:this.zone.run(() => this.donations = donations)
我能够用markForCheck()来更新它
导入ChangeDetectorRef
import { ChangeDetectorRef } from '@angular/core';
注入并实例化它
constructor(private ref: ChangeDetectorRef) { }
最后标记变化检测发生
this.ref.markForCheck();
这里有一个例子,其中markForCheck()工作,而detectChanges()不工作。
https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview
编辑:这个例子不再描绘问题:(我相信它可能会运行一个更新的Angular版本,它的固定。
(按STOP / RUN再次运行)