ChatGPT解决这个技术问题 Extra ChatGPT

在 Angular 中手动触发变更检测

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

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

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

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


L
Lazar Ljubenović

尝试其中之一:

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

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

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

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


谢谢,我选择了第三种解决方案,以免检查所有内容,因为更改已相当本地化。当我有更多时间时,我应该研究其他选项。每个选择是否对性能有影响?
ChangeDetectorRef.detectChanges() +1。验证器在我的指令可以更新输入值之前触发。
ApplicationRef.tick() 和 ChangeDetectorRef.detectChanges() 仍然存在于 2.0.0 最终版本中。
只是想我会提到这一点。这些不是静态方法,它们是实例方法。您将需要将这些类作为服务注入。
ApplicationRef.tick() 帮助解决了 FireFox v17 (<20) 的问题
s
sites

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

导入 NgZone:从 '@angular/core' 导入 { Component, NgZone };将其添加到您的类构造函数构造函数(公共区域:NgZone,...args){} 使用 zone.run 运行代码:this.zone.run(() => this.donations = 捐赠)


您应该将 zone.run 代码放在哪里,donations 到底是什么?
@suku 捐赠是您想要更新的任何属性,所以它可能是 this.foo = bar。 zone.run 去任何你想更新东西的地方。
我在使用 document.addEventListener("resume", callback) 时使用了这个解决方案来强制更新视图
N
Nuno Tomas

我可以用 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 再次运行)


detectChanges() 不起作用的好点。我注意到了同样的问题,发现如果更改检测不是 OnPush,它就可以工作。最好能得到一个解释...
似乎 detectChanges 实际上在这个 plunker 中工作?我错过了什么吗?
您应该注意 ChangeDetectorRef 仅适用于组件
(!)这是一个不好的例子,我很抱歉。示例没有显示任何内容。第一项只是被覆盖。稍微调整一下计时器...
这个例子不再描述这个问题:(我相信它可能正在运行一个更新的 Angular 版本,它已经被修复了。
J
Jeremy Swagger

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

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

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

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

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

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

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

@Input()
public childVariable: any

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

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


不...这就是问题...如果您在父级中更新...例如,例如在静态方法中“通过引用”更新,孩子不会捡起它,因为没有发生更改检测
我这几天也遇到了同样的问题。我尝试从 PHP 后端检索数据,但数据根本没有更新。在 Microsoft Edge 上工作正常,但在其他浏览器上却不行。我一直在获取我第一次开始时的数据,但如果数据发生变化,它不会在视图中更新