服務事件不會正確影響模板

Question

Auth在谷歌中使用Angular2。

首先，在HTML，我打開谷歌API庫：

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

經過Angular2服務我處理谷歌身份驗證數據併發出事件通知組件如果谷歌API準備：

//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); 
     }) 
    }; 
//... 

在這裏，在組件中，我選中複選框，或者禁用按鈕，並執行其他模板。

//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();  
    } 
} 

看起來都應該工作，但有奇怪的錯誤在瀏覽器（Chrome瀏覽器，FF） - 如果啓用瀏覽器的標籤上的網頁加載 - 它看起來像什麼也沒發生 - 複選框沒有檢查，如果我打開其他標籤頁瀏覽器加載頁面的時候，一切正常。

如何解決？它是錯誤的方式嗎？

Answer 1

進樣NgZone到一個組件，並初始化zone.run()庫代碼，這樣庫代碼使用區域修補異步API和角知道什麼時候改變檢測運行是必要的

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

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

和

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