在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()
public childVariable: any

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

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

Answer 5

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