Les événements de service n'affectent pas le modèle correctement

Question

Auth dans google, utilisez Angular2.

D'abord, en HTML, je charge la bibliothèque api google:

//index.html 
//... 
<script> 
     var googleApiClientReady = function() { 
      ng2Gauth.googleApiClientReady(gapi); 
     } 
    </script>  
    <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script> 
//... 

Après en service Angular2 Je gère les données de Google et émets événement pour informer le composant si google api est prêt:

//google auth service .ts 
import {Injectable, EventEmitter} from 'angular2/core'; 

@Injectable() 
export class GoogleAuthService { 

    isGoogleApiReady: EventEmitter<boolean>; 

    constructor() { 
     window['ng2Gauth'] = this; //is it correct way? 
     this.isGoogleApiReady = new EventEmitter;  
    } 
    //it fires from outside of Angular scope 
    public googleApiClientReady(gapi){ 
     this.gapi.auth.init(() => { 
      this.isGapiReady.emit(true); 
     }) 
    }; 
//... 

Ici, dans le composant, je coche la case, ou rends les boutons désactivés, et fais d'autres choses de modèle.

//gauth component 
import {Component} from 'angular2/core'; 
import {GauthService} from './gauth.service'; 

@Component({ 
    selector: 'gauth', 
    template: `<input type="checkbox" [(ngModel)]="isReady"> Api ready 

export class GauthComponent { 
    constructor (private _gauthService:GauthService) { 
     _gauthService.isGoogleApiReady.subscribe((flag) => this.gapiOnReady(flag)) 

    public isReady = false 
    gapiOnReady(flag: boolean) { //it fires, 
    this.isReady = true;  //but not affect on template correctly 
    console.log('gapi loaded') 
    this._gauthService.checkAuth();  
    } 
} 

On dirait que tout devrait fonctionner, mais il y a bug étrange dans les navigateurs (Chrome, FF) - si les charges de page sur l'onglet du navigateur actif - il semble que rien ne se passe - case à cocher aucune vérification, si j'ouvre d'autres onglets moment où la page de chargement du navigateur, tout est ok.

Comment le réparer? Est-ce bug angulaire ou je le fais de façon incorrecte?

Answer 1

Injecter NgZone dans un composant et initialiser le code de bibliothèque zone.run(), ainsi le code de la bibliothèque utilise les zones patché API async et angulaire sait quand pistes de détection de changement sont nécessaires

var googleApiClientReady; 
constructor(private zone: NgZone) { 
} 

public googleApiClientReady(gapi){   
    zone.run(function() { 
    this.gapi.auth.init(() => { 
     this.isGapiReady.emit(true); 
    }) 
    }); 
} 

et

gapiOnReady(flag: boolean) { 
    zone.run(function() { 
    this.isReady = true;  //but not affect on template correctly 
    console.log('gapi loaded') 
    this._gauthService.checkAuth(); 
    }); 
}