2017-10-21 41 views
0

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.Angular 4 Rupture de liaison bidirectionnelle des données avec EventListener

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.

Répondre

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

1
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.