在Angular中手动触发变更检测

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

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

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

是否有办法手动触发此变更检测?

355461 次浏览
小开
最佳答案

试试下面的方法:

  • ApplicationRef.tick()——类似于AngularJS的$rootScope.$digest()——即，检查完整的组件树
  • NgZone.run(callback)——类似于$rootScope.$apply(callback)——也就是说，计算Angular区域内的回调函数。我认为，但我不确定，在执行回调函数后，这最终会检查完整的组件树。
  • ChangeDetectorRef.detectChanges()——类似于$scope.$digest()——也就是说，只检查这个组件及其子组件

你可以将ApplicationRef、NgZone或ChangeDetectorRef注入到你的组件中。

小开

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

  1. < p >进口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:

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

我可以用markForCheck ()更新它

进口ChangeDetectorRef

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

注入并实例化它

constructor(private ref: ChangeDetectorRef) {
}

最后标记变化检测发生

this.ref.markForCheck();

下面是一个markForCheck()有效而detectChanges()无效的例子。

< a href = " https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p =预览noreferrer“rel = > https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p =预览< / >

编辑:这个例子不再描述问题了:(我相信它可能正在运行一个更新的Angular版本，在那里它已经修复了。

(按STOP/RUN再次运行)

小开

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

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

首先在父类中创建一个全局变量来保存对象/属性 会传给孩子。< / p > 接下来在子对象中创建一个全局变量来保存传递的对象/属性

然后在使用子模板的父html中，添加方括号 用子变量的名称表示，然后将其设置为等于该名称 父变量的。例子:< / p > 
<child-component-template [childVariable] = parentVariable>
</child-component-template>
最后，在子组件中定义子属性的地方，添加 输入修饰符:< / p > 
@Input()
public childVariable: any

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

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


提交答案