服务事件不会正确影响模板
Service events do not affect template correctly
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>
//...
在 Angular2 服务之后,我处理 google 身份验证数据并发出事件以通知组件 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);
})
};
//...
在这里,在组件中,我选中复选框,或禁用按钮,并执行其他模板操作。
//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) - 如果页面在活动浏览器的选项卡上加载 - 看起来没有任何反应 - 如果我打开其他复选框,则没有检查浏览器加载页面时及时标签,一切正常。
如何解决?是 Angular 错误还是我做错了?
将 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);
})
});
}
和
gapiOnReady(flag: boolean) {
zone.run(function() {
this.isReady = true; //but not affect on template correctly
console.log('gapi loaded')
this._gauthService.checkAuth();
});
}
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>
//...
在 Angular2 服务之后,我处理 google 身份验证数据并发出事件以通知组件 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);
})
};
//...
在这里,在组件中,我选中复选框,或禁用按钮,并执行其他模板操作。
//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) - 如果页面在活动浏览器的选项卡上加载 - 看起来没有任何反应 - 如果我打开其他复选框,则没有检查浏览器加载页面时及时标签,一切正常。
如何解决?是 Angular 错误还是我做错了?
将 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);
})
});
}
和
gapiOnReady(flag: boolean) {
zone.run(function() {
this.isReady = true; //but not affect on template correctly
console.log('gapi loaded')
this._gauthService.checkAuth();
});
}