在 Angular 中手动触发更改检测

Question

我正在编写一个 Angular 组件，其中包含属性 Mode(): string。

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

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

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

Answer 1

尝试以下方法之一：

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

您可以将 ApplicationRef、NgZone 或 ChangeDetectorRef 注入您的组件。

Answer 2

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

导入NgZone:

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

将其添加到您的 class 构造函数中

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

运行代码 zone.run:

this.zone.run(() => this.donations = donations)

Answer 3

更新它

导入 ChangeDetectorRef

import { ChangeDetectorRef } from '@angular/core';

注入并实例化它

constructor(private ref: ChangeDetectorRef) { 
}

最后标记要进行的更改检测

this.ref.markForCheck();

这是一个示例，其中 markForCheck() 有效而 detectChanges() 无效。

EDIT: This example doesn't portray the problem anymore :( I believe it might be running a newer Angular version where it's fixed.

（再按STOP/RUN到运行）

Answer 4

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

它允许在 parent 和 child 组件之间进行一些很好的属性绑定。

首先在parent中创建一个全局变量来保存object/property 将传递给 child。

接下来在child中创建一个全局变量来保存object/property传递的来自 parent.

然后在parenthtml中使用child模板的地方，加上方括号使用 child 变量名称的符号，然后将其设置为等于名称 parent 变量。示例：

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

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

@Input()
public childVariable: any

当您的 parent 变量更新时，它应该将更新传递给 child 组件，该组件将更新其 html.

此外，要触发 child 组件中的函数，请查看 ngOnChanges。

Answer 5

ChangeDetectorRef.detectChanges() - 类似于 $scope.$digest() -- 即只检查这个组件及其子组件

Triggering change detection manually in Angular