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

我遇到了问题，即如果通过事件lisitener事件推送Ionic Page时，数据绑定会中断。Angular 4双向数据绑定与EventListener中断

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

用户在可以访问该页面之前必须观看广告视频。

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

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

变量themself都是正确的，一切工作正常，但它只是破损的绑定。

来源

2017-10-21 felix9607

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

您可能正在寻找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

来源

2017-10-21 10:31:44

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使得它完美的我！感谢您链接到这篇文章，我发现它。

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

来源

2017-10-22 14:34:13 felix9607

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

回答

相关问题