Angular 4 Rupture de liaison bidirectionnelle des données avec EventListener

Question

J'ai le problème, que mes liaisons de données cassent si je pousse la page ionique par un événement d'événement de lisitener.

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

L'utilisateur doit regarder la vidéo publicitaire avant de pouvoir accéder à la page. Malheureusement, toutes les liaisons bidirectionnelles telles que {{title}} ne changent plus, elles affichent uniquement la valeur init.

J'ai découvert, que si un appui sur le bouton de retour "appareils" (qui est désactivé à un certain point) les valeurs sont affichées correctement. Les variables elles-mêmes sont toutes correctes et tout fonctionne bien, mais c'est juste la liaison cassée.

Answer 1

Vous devez déclencher la détection de changement manuellement, lorsque vous souhaitez lier à des événements via document.addEventListener, sinon angulaire ne sait pas à ce sujet.

Vous recherchez probablement ApplicationRef#tick(), qui déclenchera la détection complète des modifications de l'arborescence des composants.

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

constructor(private appRef: ApplicationRef) {} 

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

Voir cette question pour plus d'informations et d'autres possibilités: 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 fait parfaitement pour moi! Merci pour votre lien vers ce post, où j'ai découvert à ce sujet.

Votre solution fournie ne fonctionnait pas bien mais l'idée était correcte.