在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文档非常难以阅读,我希望这更容易:

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。