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

在google中进行身份验证，使用Angular2

首先，在HTML中，我加载google api库：

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

//index.html
//...
var googleapiclientraday=函数（）{
ng2Gauth.googleapiclientrady（gapi）；
}
//...

在使用Angular2服务后，我处理google auth数据并发出事件，以通知组件google 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);
        })
    };
//...

//google auth service.ts
从'angular2/core'导入{Injectable，EventEmitter}；
@可注射（）
出口类服务{
isGoogleApiReady:EventEmitter；
构造函数（）{
window['ng2Gauth']=this；//这是正确的方式吗？
this.isGoogleAppReady=新事件发射器；
}
//它从角度范围外发射
公共公共图书馆（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();     
  }
}

//高斯分量
从'angular2/core'导入{Component}；
从“./gauth.service”导入{GauthService}；
@组成部分({
选择器：“gauth”，
模板：`Api就绪
导出类GauthComponent{
建造商（私人_gauthService:gauthService）{
_gauthService.isGoogleApiReady.subscribe（（标志）=>this.gapiOnReady（标志））
public isReady=false
gapiOnReady（标志：boolean）{//it激发，
this.isReady=true；//但不正确影响模板
console.log（'gapi-loaded'）
这个._gauthService.checkAuth（）；
}
}

看起来一切都应该正常，但浏览器（Chrome，FF）中有一个奇怪的错误-如果页面加载到活动浏览器的选项卡上-看起来什么都没有发生-复选框没有选中，如果我在浏览器加载页面时及时打开其他选项卡，一切都正常

---

如何修复它？是Angular bug还是我做得不对？

将

NgZone

注入组件中，并使用

zone.run（）

初始化库代码，这样库代码使用经过修补的区域异步API，Angular知道何时需要运行更改检测

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

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

及

---

同样，它没有帮助，谢谢，因为gapi.auth.init它可以工作，但是有gapi.auth.authorize。它在回调中返回auth结果，在回调中我需要发出事件。这里我仍然有同样的问题。我需要查看代码。我自己不使用这个库。

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