Angular 4双向数据绑定与EventListener中断
问题描述:
我遇到了问题,即如果通过事件lisitener事件推送Ionic Page时,数据绑定会中断。Angular 4双向数据绑定与EventListener中断
ionViewDidLoad() {
document.addEventListener('admob.rewardvideo.events.REWARD',() => {
this.goToScriptedGame();
});
用户在可以访问该页面之前必须观看广告视频。
不幸的是,所有双向绑定(如{{title}}
)都不再改变,它们只显示初始值。
我发现,如果按下“设备”后退按钮(在某个点被禁用),数值显示正确。
变量themself都是正确的,一切工作正常,但它只是破损的绑定。
答
当您想通过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
答
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使得它完美的我!感谢您链接到这篇文章,我发现它。
您提供的解决方案效果不好,但这个想法是正确的。