角度视图不会更新变量更改

Question

我正在使用 Angular 5。在 @Output() EventEmitter 中，当我在绑定函数中发出一些变量时，虽然我可以更改值并进行控制台，但它并没有反映在视图中一边。

以下是我上面描述的代码：

{{ visible }} <!-- visible remains "true" before and after emit -->

<app-my-component (objChange)="onChange($event)"></app-my-component>

onChange(obj) {
  this.var = obj.var;
  this.visible = false;
  console.log(this.visible); // which logs "false" correctly.
}

我在 Google 地图标记事件侦听器中触发了我的发射器：

marker.addListener('click', () => {
    this.objChange.emit(obj);
});

我使用 Angular 4+ 已经有一段时间了（差不多一年了），这在以前从未发生过。这次可能会有所不同（但我不知道其中是否有可能是原因）：

1. EventEmitter 以某种方式由 Google Maps API 触发（使用 @types/googlemaps 导入）
2. 我上周将我的@angular/cli 更新到了版本 6（而项目仍然是版本 5）

这对我来说似乎更奇怪，只有当我在此页面上启动我的项目时才会出现此问题。 （也就是说，如果我转到另一个页面然后返回，它可以工作。）重新启动 ng serve 或尝试使用 rxjs 对我来说都失败了。如果有人遇到过同样的问题，你能分享一下你是如何解决的吗？谢谢！

Answer 1

问题很可能是您正在使用 Google 地图和某种异步函数，并且在回调中运行了 this.objChange.emit()。

这将导致 Angular 不知道你刚刚做了什么，因此它不会触发更改检测。

简单的解决方法是导入NgZone 并将@Output 的发射包装在其run 函数中：

constructor(private ngZone: NgZone) {}

someAsyncGoogleFunction
  .then(() => {

    this.ngZone.run(() => {
      this.objChange.emit();
    });
  })