451

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

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

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

有没有办法手动触发这种变化检测?

4

5 回答 5

721

尝试其中之一:

  • ApplicationRef.tick()- 类似于 AngularJS 的$rootScope.$digest()- 即检查完整的组件树
  • NgZone.run(callback)- 类似于$rootScope.$apply(callback)- 即评估 Angular 区域内的回调函数。我认为,但我不确定,这最终会在执行回调函数后检查完整的组件树。
  • ChangeDetectorRef.detectChanges()- 类似于$scope.$digest()-- 即,仅检查此组件及其子组件

您可以将ApplicationRefNgZoneChangeDetectorRef注入到您的组件中。

于 2016-01-16T16:09:30.843 回答
144

我使用了公认的答案参考并想举个例子,因为 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)
    
于 2017-01-18T16:19:38.973 回答
90

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

于 2017-03-09T12:36:39.787 回答
8

在 Angular 2+ 中,尝试使用 @Input 装饰器

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

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

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

然后在使用子模板的父 html 中,在子变量的名称中添加方括号表示法,然后将其设置为等于父变量的名称。例子:

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

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

@Input()
public childVariable: any

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

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

于 2017-12-22T15:44:10.683 回答
5

ChangeDetectorRef.detectChanges() - 类似于 $scope.$digest() - 即只检查这个组件及其子组件

于 2019-07-19T10:36:47.663 回答