我正在编写一个Angular组件,它有一个属性Mode(): string。

我希望能够以编程方式设置此属性,而不是响应任何事件。

问题是在没有浏览器事件的情况下,模板绑定{{Mode}}不会更新。

是否有办法手动触发此变更检测?


当前回答

我使用了公认的答案参考,并想举一个例子,因为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注入到你的组件中。

我使用了公认的答案参考,并想举一个例子,因为Angular 2的文档非常非常难读,我希望这更容易:

进口NgZone: import {Component, NgZone} from @angular/core; 将它添加到类构造函数中 构造函数(公共区域:NgZone,…args){} 使用zone.run运行代码: this.zone.run(() =>捐款=捐赠)

我可以用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+中,试试@Input装饰器

它允许在父组件和子组件之间进行一些良好的属性绑定。

首先在父类中创建一个全局变量来保存对象/属性 会传给孩子。

接下来,在子对象中创建一个全局变量来保存传递的对象/属性 来自父母。

然后在使用子模板的父html中,添加方括号 用子变量的名称表示,然后将其设置为等于该名称 父变量的。例子:

<child-component-template [childVariable] = parentVariable>
</child-component-template>

最后,在子组件中定义子属性的地方,添加 输入装饰:

@Input()
public childVariable: any

当父变量更新时,它应该将更新传递给子组件,子组件将更新其html。

另外,要触发子组件中的函数,请查看ngOnChanges。