angle2の結合がgoogle oauth2約束で動作しない

Question

すべてが期待通りに機能しますが、更新するビューを取得できません。

ngOnInit（）内のサブスクリプションは、データがストリームの下に来るたびにビューを更新すると予想します。

しかし、データは、コードthis.userを下流に来ている間=ユーザーは、ビューを更新しません:(

マイコンポーネントのコードがある...

import {Component, OnInit} from '@angular/core'; 
import {Subject, Observable} from 'rxjs/Rx'; 
import {AuthService} from '../../../services/auth.service'; 
import 'rxjs/add/operator/catch'; 
declare let auth2:any; 

@Component({ 
    selector: 'user', 
    templateUrl: 'build/routes/app/user/user.component.html', 
    styleUrls: ['build/routes/app/user/user.component.css'], 
    providers: [AuthService] 
}) 

export class UserComponent implements OnInit { 

    private userSubject = new Subject<string>(); 
    public user:any; 

    public userStream:Observable<any> = this.userSubject.asObservable().flatMap((code:any) => { 
    let restStream = this.authService.signIn(code) 
     .map((response:any) => { 
     return JSON.parse(response._body); 
     }).catch((err:any) => { 
     return Observable.throw(err); 
     }); 
    return restStream; 
    }).publish().refCount(); 

    constructor(public authService:AuthService) { 
    } 

    ngOnInit() { 
    this.userStream.subscribe((user:any) => { 
     console.log(user); // user is set 
     this.user = user; // this does not update the view :(
    }); 
    } 

    public googleSignIn() { 
    auth2.grantOfflineAccess({'redirect_uri': 'postmessage'}).then((authResult:any) => { 
     this.userSubject.next(authResult.code); 
    }); 
    } 

} 

図であります単に...

<button (click)="googleSignIn()">Google Sign In</button> 
<div>USER = {{user | json}}</div> 

にはどうすればAngular2ビューを更新するのですか？

注：グローバル宣言auth2はグローバルGoogle OAuth2を参照しています - ありがとう

Answer 1

subscribeで別のコンソールログを追加してthis.userが設定されているかどうかを確認してください。

console.log(this.user); 

私はそれが設定されると思いますが、UIは更新されていませんあなたの問題です。ただ、スターターのためにあなたはタイムアウトで設定したユーザーをラップしようとすると、これが取得

setTimeout(user => this.user = user, 0); 

のようなUIの更新は、あなたが早い/遅すぎる変化検出用ピックアップしすぎ変数を設定し、その後働いている場合かどうかを確認することができます。

setTimeoutはこれを実現する理想的な方法ではありません。したがって、角度2の変更検出が変更を確実に反映するように、コードを適切な方法でリファクタリングする必要があります。これにより、テンプレートの詳細やポスンカーを投稿して、より良い成果を上げる方法を知ることができます。

Answer 2

問題は、この説明のコードスニペットで見られます。..

public googleSignIn() { 
    this.user = {fred:5}; // BINDINGS UPDATE HERE 
    auth2.grantOfflineAccess({'redirect_uri': 'postmessage'}).then((authResult:any) => { 
    this.user = {fred:6}; // BINDINGS DO NOT UPDATE HERE 
    this.userSubject.next(authResult.code); 
    }); 
} 

auth2.grantOfflineAccessまたは任意の関数やそれに起因するストリーム内のデータを更新しようとすると、ビューの更新に失敗しました！

最後に、JavaScriptイベントを使用して問題を修正しました。

ここでの主な違いは、this.userStream.subscribe内イベントが送出され、イベントリスナーはここでthis.user

である私の最終作業溶液..

import {Component, OnInit} from '@angular/core'; 
import {Subject, Observable} from 'rxjs/Rx'; 
import {AuthService} from '../../../services/auth.service'; 
import 'rxjs/add/operator/catch'; 
declare let auth2:any; 

@Component({ 
    selector: 'user', 
    templateUrl: 'build/routes/app/user/user.component.html', 
    styleUrls: ['build/routes/app/user/user.component.css'], 
    providers: [AuthService] 
}) 

export class UserComponent implements OnInit { 

    public user:any; 

    private userSubject = new Subject<string>(); 
    public userStream:Observable<any> = this.userSubject.asObservable().flatMap((code:any) => { 
    let restStream = this.authService.signIn(code) 
     .map((response:any) => { 
     return JSON.parse(response._body); 
     }).catch((err:any) => { 
     return Observable.throw(err); 
     }); 
    return restStream; 
    }).publish().refCount(); 

    constructor(public authService:AuthService) { 
    } 

    ngOnInit() { 
    this.addUserEventListener(); 
    this.subscribeToUserStream(); 
    } 

    public googleSignIn() { 
    auth2.grantOfflineAccess({'redirect_uri': 'postmessage'}).then((authResult:any) => { 
     this.userSubject.next(authResult.code); 
    }); 
    } 

    private addUserEventListener() { 
    document.addEventListener('userEvent', (e:CustomEvent) => { 
     this.user = e.detail; 
    }); 
    } 

    private subscribeToUserStream() { 
    this.userStream.subscribe((user:any) => { 
     let userEvent = new CustomEvent('userEvent', {'detail': user}); 
     document.dispatchEvent(userEvent); 
    }); 
    } 

} 

を設定していること

この解決策は動作しますが、なぜauth2.grantOfflineAccessがAngular2でこのような問題を引き起こすのかわかりません。

今までそんなに この外auth2.grantOfflineAccess === この