Observableをビヘイビアサブジェクトに簡単に変換または割り当てて他のコンポーネントがそれを共有できるようにする方法

Question

Observableスタイルプログラミングの新機能です。私は質問がある：私は、コンポーネント間のアプリを介してユーザー情報を共有したい - と私はこの情報を共有するためにBehaviorSubjectを使用します。これは、AuthInfoとしてBehaviorSubjectを共有することによって影響を受けます。私のアプリケーションコンポーネントでuidを含むAuthInfoを共有できるのであれば、それを使って自分のユーザーオブジェクトデータを共有できますか？

問題は、ユーザーオブジェクトです、私はFirebaseから取得しています。それはObservableであり、どのようにこれをBehavior Subjectに割り当てることはできません。だからここに私がしようとしたコードです：

@Injectable() 
    export class AuthService { 

    static UNKNOWN_USER = new AuthInfo(null); 

    static EMPTY_USER = new User(null, null, null, null); 

    authInfo$: BehaviorSubject<AuthInfo> = new BehaviorSubject<AuthInfo>(AuthService.UNKNOWN_USER); 

    userInfo$: BehaviorSubject<User> = new BehaviorSubject<User>(AuthService.EMPTY_USER); 

    constructor(private auth: FirebaseAuth, private db:AngularFireDatabase, @Inject(FirebaseRef) fb) { 

//firebase way to see if user is login or not 
this.auth.subscribe(user => { 
    if (user) { 
    const authInfo = new AuthInfo(user.uid); 
    this.authInfo$.next(authInfo); 
    //This is the part I do not know how to do 
    [OPTION 1]: this.userInfo$.next(findUserByuid(user.uid)) ?? - error 
    [OPTION 2]: this.userInfo$ = findUserByuid(user.uid) ?? - userInfo$ turn into an observerable, which when I logout to call this.userInfo$.next(AuthService.EMPTY_USER) it will throw error as .next() is not a function. 
    [OPTION 3]: 
    this.findUserByuid(user.uid).subscribe(user => { 
     this.userInfo$.next(user); 
    }); 
    ---- Can I put a subscribe inside of another subscribe to chain it like promise? I am not sure this is following the best practices. But this is the only option that there is no error. But just not sure I am doing it right. I do get the user object no problem 

    } 
    else { 
    this.authInfo$.next(AuthService.UNKNOWN_USER); 
    } 
}); 


} 

findUserByuid(uid:string):any { 
    //return a firebase object observerable 
    return this.db.object('userProfile/' + uid).map(user => User.fromJson(user)); 

} 

logout() { 

this.userInfo$.next(AuthService.EMPTY_USER); 
this.authInfo$.next(AuthService.UNKNOWN_USER); 
this.auth.logout(); 
} 

そして大きな疑問は、私が行動の対象を使用してアプリケーション間でデータを共有する必要がありますか？または、私はちょうどuser $ = findUserByuid（uid）のようなobservableを使って、User $をAuthServiceのメンバ変数として使うべきですか？そして、他のコンポーネントはユーザー$に加入していますか？

Angular1のようなダミーサービスを使わずに、Angular2でデータを共有するための最良の方法を非常に混乱しています。私はpplがBehavior Subjectを使って共有状態を共有するのを見ました。実装。どんな助けでも大歓迎です！行動主題に関してそこには多くのリソースがありません。

[UPDATE]：アプリケーション間で最良の方法2共有データは、それがReduxのを使っている私の意見で Behavior Subject VS regular Observable

Answer 1

これは、私はそれを書くだろうかです：

... 

authInfo$: Observable<AuthInfo>; 
userInfo$: Observable<User>; 

constructor(private auth: FirebaseAuth, private db:AngularFireDatabase, @Inject(FirebaseRef) fb) { 
    //firebase way to see if user is login or not 
    this.authInfo$ = auth 
    .startWith(null) // in case auth has no initial value 
    .map(user => user ? new AuthInfo(user.uid) : AuthService.UNKNOWN_USER) 
    .publishReplay(1) 
    .refCount(); 

    // automatically update the unserInfo$ when authInfo$ changes (no matter from where) 
    // ...we are "reacting" on the data emitted by authInfo$ ... hence the name "reactive" programming 
    this.userInfo$ = this.authInfo$ 
    .switchMap(authInfo => this.findUserByuid(authInfo.uid)) 
    .publishReplay(1); 

    // this activates the whole stream-flow 
    this.userInfo$.connect(); // instead of .connect() you could also append a ".refCount()" after the ".publishReplay(1)", however then it would only be acitve when there is at least 1 subscriber, so it depends on what you want 
} 

findUserByuid(uid?: string): Observable<User> { 
    if (uid == null) { 
    return Observable.of(AuthService.EMPTY_USER); 
    } else { 
    return this.db.object('userProfile/' + uid) 
     .map(user => User.fromJson(user)); 
    } 
} 

logout() { 
    this.auth.logout(); 
} 

... 

Answer 2

：私のアプリの異なる部分の間でデータを渡すために、私だけではなく、観察の行動対象を選択した理由パターン2では、ngrx/storeとngrx/effectsを実装しています。スマートな構成要素とプレゼンテーション要素のパターン。

は、私はそれらのパターンhttps://github.com/vigohe/ionic2-marvelApp

との例を持っている私の実行している例：

https://github.com/ngrx/example-app

：ngrxレポから

https://enigmatic-plains-75996.herokuapp.com/

公式の例

詳細情報：

• https://github.com/ngrx/store
• http://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/

それはあなたの人生が変わりますので、それを学ぶにしてください;）