2016-05-19 11 views
1

ユーザーがログインしているかどうかを単に示すサービスがあります。 ユーザーを確認するためにhttp要求を行う別のサービスから更新されます。Angular 2の別のサービスでObservableを購読する方法

ナビゲーションバーコンポーネントは、観測可能な(BehaviorSubject)に基づいてユーザにログインまたはログアウトボタンを表示するためにuiを更新します。


のnav-main.component.ts

import {Auth} from '../services/auth.service'; 

constructor (public _auth: Auth) { 
    this._auth.check().subscribe(data =>{console.log(data)}) 
} 

auth.service.ts

@Injectable() 

export class Auth { 
    subject: Subject<boolean> = new BehaviorSubject<boolean>(null); 
    loggedIn:boolean = false; 

    constructor(){ 
     this.subject.next(this.loggedIn); 
    } 

    login(id_token){ 
     ... 
     this.loggedIn = true; 
     this.subject.next(this.loggedIn); 
    } 

    check() { 
     return this.subject.asObservable().startWith(this.loggedIn);  
    } 
} 

login.service.ts(私のブートストラップ機能で私が認証を注入しています)

import {Injectable, Injector} from 'angular2/core'; 
import {Http,Headers} from 'angular2/http'; 
import {AppInjectorService} from './app-injector.service'; 
import {Auth} from './auth.service'; 
import {UserService} from './user.service' 
import 'rxjs/Rx'; 
import {Observable}  from 'rxjs/Observable'; 

@Injectable() 

export class LogInUserService { 
    auth:Auth; 
    injector:Injector; 
    constructor(private http:Http) { 
    // let injector: Injector= AppInjectorService(); 
    this.injector = Injector.resolveAndCreate([Auth]); 

    this.auth = this.injector.get(Auth); 
} 

logInUser(data) { 
... 
return this.http.post(this._authUrl, body, { headers:headers}) 
    .map(function(res){ return <UserService> res.json().data;}) 
    .do(data => this.logIn(data)) 
    .catch(this.handleError); 
} 
//on success tell the auth.login the public key 
logIn(data){ 
    this.auth.login(data.publicKey); 
} 

答えて

1

@Inject(Auth)_authはこのトリックをやったと思った。

のnav-main.component.ts

import {Component, OnInit, Inject} from 'angular2/core'; 

_auth; 

constructor(public _router: Router, 
      public _service: IsActiveRouteService, 
      @Inject(Auth) _auth){ 

    this._auth = _auth;//@Inject(Auth) _auth did the trick 
} 

ngOnInit() { 
    this._auth.check() 
       .subscribe(data =>{ 
        console.log('nav init check() '+data) 
    }); 
} 

auth.service.ts

import {Injectable} from 'angular2/core'; 
import {Observable} from "rxjs/Observable"; 
import {Subject} from 'rxjs/Subject'; 
import {BehaviorSubject} from 'rxjs/Rx'; 


@Injectable() 

export class Auth { 
    isLoggedIn:boolean = false; 
    logIn$: Subject<boolean> = new BehaviorSubject<boolean>(this.isLoggedIn); 
    externalBS; 

    constructor() { 
     this.logIn$.asObservable(); 
     this.externalBS = this.logIn$; 
    } 


    login(id_token) { 
     window.localStorage.setItem('id_token',id_token); 
     this.isLoggedIn = true; 
     this.logIn$.next(this.isLoggedIn); 
    } 


    logout() { 
     window.localStorage.setItem('id_token',''); 
     this.isLoggedIn = false;    
    } 

    check() { 
     return this.externalBS.asObservable().startWith(this.isLoggedIn); 
    } 

} 
+0

私はあなたがisLoggedInを必要としないと思います。あなたはthis.logIn.next(false)できますか?なぜあなたはstartWith(this.isLoggedIn)を持っていますか?私はこれを理解していない。 – Mukus

関連する問題