我正在编写一个Angular组件,它有一个属性Mode(): string。
我希望能够以编程方式设置此属性,而不是响应任何事件。
问题是在没有浏览器事件的情况下,模板绑定{{Mode}}不会更新。
是否有办法手动触发此变更检测?
我正在编写一个Angular组件,它有一个属性Mode(): string。
我希望能够以编程方式设置此属性,而不是响应任何事件。
问题是在没有浏览器事件的情况下,模板绑定{{Mode}}不会更新。
是否有办法手动触发此变更检测?
当前回答
试试下面的方法:
ApplicationRef.tick()——类似于AngularJS的$rootScope.$digest()——即检查完整的组件树 NgZone.run(回调)——类似于$rootScope.$apply(回调)——也就是说,计算Angular zone内的回调函数。我认为,但我不确定,在执行回调函数后,这最终会检查完整的组件树。 ChangeDetectorRef.detectChanges()——类似于$scope.$digest()——也就是说,只检查这个组件及其子组件
你可以将ApplicationRef、NgZone或ChangeDetectorRef注入到你的组件中。
其他回答
在Angular 2+中,试试@Input装饰器
它允许在父组件和子组件之间进行一些良好的属性绑定。
首先在父类中创建一个全局变量来保存对象/属性 会传给孩子。
接下来,在子对象中创建一个全局变量来保存传递的对象/属性 来自父母。
然后在使用子模板的父html中,添加方括号 用子变量的名称表示,然后将其设置为等于该名称 父变量的。例子:
<child-component-template [childVariable] = parentVariable>
</child-component-template>
最后,在子组件中定义子属性的地方,添加 输入装饰:
@Input()
public childVariable: any
当父变量更新时,它应该将更新传递给子组件,子组件将更新其html。
另外,要触发子组件中的函数,请查看ngOnChanges。
我可以用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再次运行)
我使用了公认的答案参考,并想举一个例子,因为Angular 2的文档非常非常难读,我希望这更容易:
进口NgZone: import {Component, NgZone} from @angular/core; 将它添加到类构造函数中 构造函数(公共区域:NgZone,…args){} 使用zone.run运行代码: this.zone.run(() =>捐款=捐赠)
试试下面的方法:
ApplicationRef.tick()——类似于AngularJS的$rootScope.$digest()——即检查完整的组件树 NgZone.run(回调)——类似于$rootScope.$apply(回调)——也就是说,计算Angular zone内的回调函数。我认为,但我不确定,在执行回调函数后,这最终会检查完整的组件树。 ChangeDetectorRef.detectChanges()——类似于$scope.$digest()——也就是说,只检查这个组件及其子组件
你可以将ApplicationRef、NgZone或ChangeDetectorRef注入到你的组件中。