服务事件不会正确影响模板

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