2017-05-30 10 views
1

私はサービスに何らかの状態を保持させたい単純な角型アプリケーションを構築しています。私の最初の試みはブール値のloggedInだけでした。基本的には、navbarコンポーネントをこの値に登録して、falseのときに 'login'オプションが表示され、trueの場合は 'admin'ボタンが表示されるようにします。観測可能なサブスクライブメソッドが一度だけ呼び出される

マイサービス:私のnav要素で

@Injectable() 
export class AuthService { 
    private _loggedIn = new BehaviorSubject(false); 
    public readonly loggedIn$ = this._loggedIn.asObservable(); 

    constructor(private http: Http, private router: Router) { 
    this._loggedIn = new BehaviorSubject(false); 
    } 

    public login(u: User): Observable<any> { 
    let obs = this.http.post(ApiRoutes.login, u).map(res => res.json()); 

    obs.subscribe(res => { 
     this._loggedIn.next(res.success); 

     if (this._loggedIn.getValue()) 
     this.router.navigate(['/admin']); 
    }); 

    return obs; 
    } 
} 

@Component({ 
    selector: 'app-nav', 
    templateUrl: './nav.component.html', 
    styleUrls: ['./nav.component.scss'], 
    providers: [AuthService] 
}) 
export class NavComponent implements OnInit { 
    loggedIn: boolean; 

    constructor(private as: AuthService) { } 

    ngOnInit() { 
    this.as.loggedIn$.subscribe(isLoggedIn => { 
     this.loggedIn = isLoggedIn; 
     console.log('from nav ' + isLoggedIn); 
    }, err => { 
     console.log(err); 
    },() => { 
     console.log('complete'); 
    }); 
    } 

} 

今アプリが起動しなくログイン戻った後ときに私はコンソール出力を参照してください。なぜnavコンポーネントのsubscribe関数が呼び出されるのは1回だけです(ページが/ adminに移動するので、サービスのsubscribeが呼ばれていることがわかります)。これはホット/コールドオブザーバブルと関係がありますか?私は.publishLast()。refCount()のようなものを使用しようとしましたが、無駄です。

答えて

4

NavComponentのプロバイダでAuthServiceを追加しました。そのため、AuthServiceの固有のインスタンスが、認証コンポーネントで使用されているインスタンスとは異なります。

このサービスは、アプリケーション内のすべてのコンポーネントによって共有されるシングルトンである必要があります。したがって、ルートNgModuleのプロバイダ、およびそれ以外の場所で宣言する必要があります。

+0

それはすべてのように見えます。私はサービスのコンストラクタparamを解決できないというtsエラーを取り除いたようなので、私はそのようなプロバイダを追加したと思います。便利ですが、私はもはやそのエラーを見ていません。まあ、新しいことを学びました。ありがとう! – eatinasandwich

関連する問題