在 Angular 中手动触发变化检测

Question

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

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

问题是在没有浏览器事件的情况下，模板绑定{{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 文档非常难以阅读，我希望这更容易：

1. 导入NgZone ：

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

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

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

3. 使用zone.run运行代码：

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

Answer 3

我能够用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 再次运行）

Answer 4

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

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

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

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

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

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

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

@Input()
public childVariable: any

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

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

Answer 5

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

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

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

有没有一种方法可以手动触发此更改检测？