Angular 4 双向数据绑定与 EventListener 中断答案

【问题标题】：Angular 4 Two-Way Data Binding breaks with EventListenerAngular 4 双向数据绑定与 EventListener 中断
【发布时间】：2018-04-02 09:28:52
【问题描述】：

我有一个问题，如果我通过事件侦听器事件推送 Ionic Page，我的数据绑定会中断。

ionViewDidLoad() {
document.addEventListener('admob.rewardvideo.events.REWARD', () => {
  this.goToScriptedGame();
});

用户必须先观看广告视频，然后才能访问该页面。

遗憾的是，像 {{title}} 这样的所有双向绑定都不再更改，它们只显示初始值。

我发现，如果按下“设备”后退按钮（在某个点被禁用），则值会正确显示。

变量本身都是正确的，一切正常，但只是绑定损坏。

【问题讨论】：

标签： angular ionic-framework data-binding dom-events

【解决方案1】：

当您想通过document.addEventListener 绑定到事件时，您需要手动触发更改检测，否则 Angular 不知道它。

您可能正在寻找ApplicationRef#tick()，它将触发完整的组件树更改检测。

import { ApplicationRef } from '@angular/core';

constructor(private appRef: ApplicationRef) {}

ionViewDidLoad() {
  document.addEventListener('admob.rewardvideo.events.REWARD', () => {
    this.goToScriptedGame();
    this.appRef.tick();
  });
}

有关更多信息和其他可能性，请参阅此问题：Triggering Angular2 change detection manually

【讨论】：

【解决方案2】：

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

constructor(public zone: NgZone) {}

ionViewDidLoad() {
document.addEventListener('admob.rewardvideo.events.REWARD', () => {
  this.zone.run(() =>
    this.navCtrl.push("ScriptedPage")
  );
});

NgZone 非常适合我！谢谢你链接到这篇文章，我是在哪里发现的。

您提供的解决方案效果不佳，但想法是正确的。

【讨论】：