在Angular中手动触发变化检测

本文翻译自：Triggering change detection manually in Angular

I'm writing an Angular component that has a property Mode(): string . 我正在编写一个具有属性Mode(): string的Angular组件。

I would like to be able to set this property programmatically not in response to any event. 我希望能够以编程方式设置此属性，而不是响应任何事件。

The problem is that in the absence of a browser event, a template binding {{Mode}} doesn't update. 问题是在没有浏览器事件的情况下，模板绑定{{Mode}}不会更新。

Is there a way to trigger this change detection manually? 有没有办法手动触发此更改检测？

---

#1楼

参考：https://stackoom.com/question/2M8BC/在Angular中手动触发变化检测

---

#2楼

Try one of these: 尝试以下方法之一：

• ApplicationRef.tick() - similar to AngularJS's $rootScope.$digest() -- ie, check the full component tree ApplicationRef.tick() - 类似于AngularJS的$rootScope.$digest() - 即检查完整的组件树
• NgZone.run(callback) - similar to $rootScope.$apply(callback) -- ie, evaluate the callback function inside the Angular zone. NgZone.run(callback) - 类似于$rootScope.$apply(callback) - 即评估Angular区域内的回调函数。 I think, but I'm not sure, that this ends up checking the full component tree after executing the callback function. 我想，但我不确定，这最终会在执行回调函数后检查完整的组件树。
• ChangeDetectorRef.detectChanges() - similar to $scope.$digest() -- ie, check only this component and its children ChangeDetectorRef.detectChanges() - 类似于$scope.$digest() - 即仅检查此组件及其子组件

You can inject ApplicationRef , NgZone , or ChangeDetectorRef into your component. 你可以注入ApplicationRef ， NgZone或ChangeDetectorRef到组件。

---

#3楼

I used accepted answer reference and would like to put an example, since Angular 2 documentation is very very hard to read, I hope this is easier: 我使用了接受的答案参考，并想举个例子，因为Angular 2文档非常难以阅读，我希望这更容易：

1. Import NgZone : 导入NgZone ：

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

2. Add it to your class constructor 将它添加到类构造函数中

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

3. Run code with zone.run : 使用zone.run运行代码：

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

---

#4楼

I was able to update it with markForCheck() 我能用markForCheck（）更新它

Import ChangeDetectorRef 导入ChangeDetectorRef

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

Inject and instantiate it 注入并实例化它

constructor(private ref: ChangeDetectorRef) { 
}

Finally mark change detection to take place 最后标记变化检测发生

this.ref.markForCheck();

Here's an example where markForCheck() works and detectChanges() don't. 这是一个markForCheck（）工作的例子，而detectChanges（）则没有。

https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview

EDIT: This example doesn't portray the problem anymore :( I believe it might be running a newer Angular version where it's fixed. 编辑：此示例不再描述问题:(我相信它可能正在运行一个更新的Angular版本，它已修复。

(Press STOP/RUN to run it again) （按STOP / RUN再次运行）

---

#5楼

In Angular 2+, try the @Input decorator 在Angular 2+中，尝试@Input装饰器

It allows for some nice property binding between parent and child components. 它允许在父组件和子组件之间进行一些不错的属性绑定。

First create a global variable in the parent to hold the object/property that will be passed to the child. 首先在父级中创建一个全局变量，以保存将传递给子级的对象/属性。

Next create a global variable in the child to hold the object/property passed from the parent. 接下来，在子节点中创建一个全局变量，以保存从父节点传递的对象/属性。

Then in the parent html, where the child template is used, add square brackets notation with the name of the child variable, then set it equal to the name of the parent variable. 然后在使用子模板的父html中，添加带有子变量名称的方括号表示法，然后将其设置为等于父变量的名称。 Example: 例：

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

Finally, where the child property is defined in the child component, add the Input decorator: 最后，在子组件中定义子属性的位置，添加Input装饰器：

@Input()
public childVariable: any

When your parent variable is updated, it should pass the updates to the child component, which will update its html. 当您的父变量更新时，它应该将更新传递给子组件，这将更新其html。

Also, to trigger a function in the child component, take a look at ngOnChanges. 另外，要触发子组件中的函数，请查看ngOnChanges。

---

#6楼

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