Question

我遇到的问题是，如果我通过事件lisitener事件推送Ionic页面，我的数据绑定就会中断。

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

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

可悲的是，所有双向绑定（如{{title}}）都不再更改，它们只显示初始值。

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

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

Answer 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

Answer 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对我来说非常完美！感谢您链接到这篇文章，在那里我发现了它。

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

Angular 4双向数据绑定与EventListener打破

2 个答案: