在Angular中手动触发变化检测

4 回答

• 85

  尝试以下方法之一：

  • ApplicationRef.tick() - 类似于AngularJS的 $rootScope.$digest() - 即检查完整的组件树

  • NgZone.run(callback) - 类似于 $rootScope.$apply(callback) - 即，评估Angular区域内的回调函数 . 我想，但我不确定，这最终会在执行回调函数后检查完整的组件树 .

  • ChangeDetectorRef.detectChanges() - 类似于 $scope.$digest() - 即，仅检查此组件及其子组件

  您可以将 ApplicationRef ， NgZone 或 ChangeDetectorRef 注入组件中 .

  回复于 2024-05-03T12:15:46+08:00
• 454

  我使用了接受的答案参考，并想举个例子，因为Angular 2文档非常难以阅读，我希望这更容易：

  • 导入 NgZone ：

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

  • 将其添加到类构造函数中

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

  • 使用 zone.run 运行代码：

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

  回复于 2024-05-03T12:15:46+08:00
• 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再次运行）

  回复于 2024-05-03T12:15:46+08:00
• 47

  In Angular 2+, try the @Input decorator

  它允许在父组件和子组件之间进行一些不错的属性绑定 .

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

  接下来，在子节点中创建一个全局变量，以保存从父节点传递的对象/属性 .

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

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

  最后，在子组件中定义子属性的位置，添加Input装饰器：

  @Input()
  public childVariable: any
  

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

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

  回复于 2024-05-03T12:15:46+08:00