服务事件不会影响正常的模板 [英] Service events do not affect template correctly

问题描述

验证在谷歌，使用Angular2。

Auth in google, use Angular2.

首先，在HTML中，我打开谷歌API库：

First, in HTML, I load google api library:

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

经过Angular2服务我​​处理谷歌权威性的数据和事件发出通知组件如果谷歌API的准备：

After in Angular2 service I handle google auth data and emit event to inform component if google api is ready:

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

下面，在组件，我检查复选框，或者使按钮禁用，做其他的东西模板

Here, in the component, I check checkbox, or make buttons disabled, and do other template stuff.

//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）怪异的错误 - 如果已激活浏览器的标签页加载 - 它看起来像什么也没发生 - 复选框没有检查，如果我在的时候浏览器加载打开其他标签页页面，一切正常。

It looks like all should work but there is weird bug in browsers (Chrome, FF) - if page loads on active browser's tab - it looks like nothing happens - checkbox no checks, if I open other tabs in time when browser load page, all is ok.

如何解决呢？它是角错误或我做错误的方式？

How to fix it? Is it Angular bug or I do it wrong way?

推荐答案

注入 NgZone 到一个组件，并初始化库code。与 zone.run（），这样库code使用区域修补异步API和角知道什么时候变化检测运行是必要的。

Inject NgZone into a component and initialize the library code with zone.run(), this way the library code uses zones patched async API and Angular knows when change detection runs are necessary

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

这篇关于服务事件不会影响正常的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！