在Angular中手动触发变更检测

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

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

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

有没有办法手动触发此更改检测？

尝试以下方法之一：

• ApplicationRef.tick()-与AngularJS类似$rootScope.$digest()-例如，检查完整的组件树
• NgZone.run(callback)-类似于$rootScope.$apply(callback)-即，在Angular区域内评估回调函数。我认为，但我不确定，这最终在执行回调函数后检查整个组件树。
• ChangeDetectorRef.detectChanges()-类似于$scope.$digest()-即，仅检查此组件及其子项

您可以将ApplicationRef，NgZone或ChangeDetectorRef注入到组件中。

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

1. 导入NgZone：

   import { Component, NgZone } from '@angular/core';
   

2. 将其添加到您的类构造函数

   constructor(public zone: NgZone, ...args){}
   

3. 使用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重新运行）

在Angular 2+中，尝试@Input装饰器

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

首先在父级中创建一个全局变量，以保存将传递给子级的对象/属性。

接下来，在子级中创建一个全局变量，以保存从父级传递来的对象/属性。

然后在使用子模板的父html中，添加带有子变量名称的方括号符号，然后将其设置为等于父变量的名称。例：

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

最后，在子组件中定义子属性的地方，添加Input装饰器：

@Input()
public childVariable: any

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

另外，要触发子组件中的功能，请查看ngOnChanges。

ChangeDetectorRef.detectChanges（）-与$ scope。$ digest（）类似-即，仅检查此组件及其子级