コンポーネントリフレッシュを角2で実行する

Question

ユーザーがログインしているかどうかに基づいて異なるリンクを表示するナビゲーションバーを実装しようとしています。

tokenNotExpired()機能を提供するangular2-jwtライブラリを使用しています。

私は2つのルート、/homeと/loginを持っています。私は<router-outlet>の外にあるnavbarコンポーネントを持っています。つまり、ルートが変更されるたびに初期化されるのではなく、1回だけ初期化されます。

ログインに成功した後、私はrouter.navigate(['/home])を呼び出しています。ホームとログインの両方は、ユーザがそれぞれのngOnInit()機能でログインしているかどうかをチェックします。したがって、ホームコンポーネントは、ログインしているユーザを検出することができます。

ただし、ログインが通知されていないため、ナビゲーションバーを更新できません。

誰でもこの変更検出を実装する正しい方法を教えてください。

ありがとうございました。

Answer 1

サービス

@Injectable() 
export class UserAuthService{ 
    userLoggedIn : bool = false; 

    //call this function when login status changes 
    changeLoginStatus(status: bool){ 
     this.userLoggedIn = status; 
    } 
} 

を経由してログイン状況を公開し、あなたのサービスのシングルトンを作る

@NgModule({ 
    declarations: [ 
    NavbarComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing, 
    ], 
    providers: [UserAuthService], // <-- Provide your service here 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

ユーザーあなたのサービス、あなたのナビゲーションバーで

import { UserAuthService } from 'path/to/service'; 

export class NavbarComponent { 
    constructor(private authService: UserAuthService) { } // <-- inject service 

    ngOnInit() { } 
} 

あなたがサービスを使用して、テンプレートを変更することができます。

<div [hidden]="!authService.userLoggedIn"><a routerLink="/login">login</a></div> 

changeLoginStatusログインステータスが変更されたときのサービスの機能。