ANGULAR 2 - コンポーネント共有データサービス

Question

これは本当に頭を悩ませています。

私はFirebaseを使用して、ソーシャルログインセットアップとちょっといいアプリを持っていると角2

すべてがリアルタイムでなければなりません。基本的には、ユーザーがFacebook経由でログインしたときに、個人情報がサービスに渡されObservableとして保存され、サービスに加入しているコンポーネントに即座に表示されるようにするため、コンポーネント内からObservableにアクセスできるようにしたい互いに直接リンクされておらず、階層から完全に外れている可能性もあります。なぜ、私は@InputやEventEmitterなどを使用できません。

私は多くのことを試しましたが、私が現在持っているのは、ユーザーデータをサービスに渡すログインコンポーネントと、サービスに当たった直後にリアルタイムでこのデータにアクセスできるランダムコンポーネントです。

*私のログインコンポーネント*

import { Component, OnInit } from '@angular/core'; 
import { AngularFire, AuthProviders, AuthMethods, FirebaseListObservable } from 'angularfire2'; 
import { Router } from '@angular/router'; 
import { GlobaluserService } from '../globaluser.service'; 
import { Subject } from 'rxjs/Subject'; 


@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
}) 
export class LoginComponent { 

    email: string; 
    password: string; 
    userData = {}; 
    _api; 

    constructor(public af: AngularFire, private router: Router, private api: GlobaluserService) { 
    this._api = this.api; 
    } 

    loginFacebook() { 
    this.af.auth.login({ 
     provider: AuthProviders.Facebook, 
     method: AuthMethods.Popup, 
    }).then((facebookUser) => { 

     this.userData = { 
      uID: facebookUser.auth.uid, 
      profilePic: facebookUser.auth.photoURL, 
      username: facebookUser.auth.displayName, 
      email: facebookUser.auth.email, 
      platform: 'facebook' 
     } 

     this._socialLoginProcess(this.userData); // this method is described below 

    }).catch((error) => { 
     console.log("Facebook failure: " + JSON.stringify(error)); 
    }); 
    } 

    // passes the user data to the shared service and outputs the data in the console 
    _socialLoginProcess(userData) { 
    this._api.saveData(userData); 
    console.log("Login Success: " + JSON.stringify(this.userData)); 
    } 


} 

*共有サービス*

import { Component, Injectable,Input,Output,EventEmitter } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 
import { Observable } from 'rxjs/Observable'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import 'rxjs/add/operator/map'; 


// Name Service 
export interface usersData { 
    uID: string, 
    profilePic: string, 
    username: string, 
    email: string, 
    platform: string 
} 


@Injectable() 
export class GlobaluserService { 

    sharingData: Observable<usersData[]> 

    private _sharingData: BehaviorSubject<usersData[]>; 

    private dataStore: { 
    sharingData: usersData[] 
    }; 


    constructor() { 
    this.dataStore = { sharingData: [] }; 
    this._sharingData = <BehaviorSubject<usersData[]>>new BehaviorSubject([]); 
    } 

    saveData(userData) { 
    this.sharingData = userData; 
    } 

    getData() { 
    console.log('get data function called' + JSON.stringify(this.sharingData)); 
    return this._sharingData.asObservable(); 
    } 


} 

*ランダム成分私は、このサービスからユーザーデータを取得できるようにしたい*

import { Component, OnInit, Input } from '@angular/core'; 
import { AngularFire, AuthProviders, FirebaseListObservable } from 'angularfire2'; 
import { Router } from '@angular/router'; 
import { GlobaluserService } from '../globaluser.service'; 

@Component({ 
selector: 'app-navigation', 
templateUrl: './navigation.component.html', 
styleUrls: ['./navigation.component.css'] 
}) 

export class NavigationComponent implements OnInit { 

    isAuth = false; 
    user = {}; 

    subscription : any; 
    userKonte  : any; 
    _userAPIservice: any; 

    constructor(private router: Router, private api: GlobaluserService) { 

     this.subscription = this.api.getData().subscribe(_sharingData => { 
      this.userKonte = _sharingData; 
      console.log(JSON.stringify(this.userKonte) ); 
     }); 

    } 

    ngOnInit(){ 
     console.log(JSON.stringify(this.userKonte) ); 
    } 





} 

Answer 1

代わりの

saveData(userData) { 
    this.sharingData = userData; 
} 

新しい価値を放出したいときgetDataは、被験者から観測可能になっているので、あなたがBehaviorSubject

saveData(userData) { 
    this._sharingData.next(userData); 
} 

にnextに必要な、観測可能に加入nextが呼び出されたときに、被験者に新しい排出物を与えるでしょう