问题描述
验证在谷歌,使用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();
});
}
这篇关于服务事件不会影响正常的模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!