angle2のシナリオでルーティング後にナビゲーションバーを更新する方法

Question

ナビゲーションバーの右側にブートストラップnavbarがあります。ログイン、ログアウト、登録のようなリンクがあります 私はapp.component.html .TS私はそのトークンを取得するために私のAuthen.Service.ts呼び出しlogin.component.tsで

<div class="navbar-collapse collapse"> 
// Here i check if user is authenticated, display : Hello abc@gmail.com 
<ul *ngIf="user" class="nav navbar-nav navbar-right"> 
      //code in here 
</ul> 
// If user is not authenticated, display Login - Register 
<ul *ngIf="!user" class="nav navbar-nav navbar-right"> 
    <li><a routerLink="/register" id="registerLink">Register</a></li> 
    <li><a routerLink="/login" id="loginLink">Log in</a></li> 
</ul>  

はここでのlocalStorage

import { UrlConstants } from './core/common/url.constants'; 
import { LoggedInUser } from './core/domain/loggedin.user'; 
import { SystemConstants } from './core/common/system.constants'; 


@Component({ 
    selector: 'app-login', 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'] 
}) 
    export class LoginComponent implements OnInit { 
     public user: any; 
     private isLoggedIn = false; 


    loginUser(valid: boolean) { 
    this.loading = true; 
    if (valid) { 
     const userData = { 
     username: this.form.controls.username.value, 
     password: this.form.controls.password.value 
     } 

     this._authenService.login(userData.username, userData.password).subscribe(data => { 
     this.user = JSON.parse(localStorage.getItem(SystemConstants.CURRENT_USER)); 
     // If success redirect to Home view 
     this._router.navigate([UrlConstants.HOME]); 
     }, error => { 
     this.loading = false; 
     }); 

    } 
    } 
    ngOnInit() { 

    } 

} 

のお店ですが、私のAuthen.Service.ts

ですここ

は、私が得た問題は、私は右の状態の変化にナビゲーションバーを更新カントである私のapp.component.ts

export class AppComponent implements OnInit { 

    // the user object got from localStore 
    ngOnInit() { 
     this.user = JSON.parse(localStorage.getItem(SystemConstants.CURRENT_USER)); 
     console.log(this.user); 
     } 
} 

である（それはまだ動作し、私はトークンを持っているが、私は、全体をリフレッシュする必要がありますナビゲーションバーを更新するにはどうすればいいですか？

どのようにしてナビゲーションバーを角度で更新できますか？おかげ

Answer 1

私はあなたの問題を理解できるように、それは次のとおりです。私は、次のような解決策を考えることができ、ユーザは

で自分自身を締結した後、主成分である「ログイン」リンクを非表示にする方法：

あなたのAuthService内部のことができます。パブリックブール部材「isLoggedIn」を追加します。

@Injectable() 
    export class AuthService { 
    isLoggedIn = false; 
    } 

あなたはログイン内部の部品

の間でこのサービスを共有することができます「あなたが見ることができますアプリのコンポーネントテンプレートで、その後、

export class AppComponent { 
    constructor(
    private router: Router, private auth:AuthService){} 

    ngOnInit() { 
    this.router.events.subscribe(event => { 
     if (event.constructor.name === "NavigationEnd") { 
     this.isLoggedin = this.auth.isLoggedIn; 
     } 
    }) 
    } 

} 

そして：あなたのapp.componentでログインに成功

login(){ 

this.auth.isLoggedIn = true 

} 

後にtrueにisLoggedInを設定できるコンポーネントを使用するには、ルータのNavigationEndイベントを購読することができます！isLoggedin "ここ

ログイン」* ngIf =とメニュー" は