angle2でページビューを動的に変更するにはどうすればよいですか？

Question

私はAngular2を学んでいますが、今は問題があります。私のページには、「ログイン」ボタンがあります。ユーザーがログインした後、「ログアウト」に変更します。このボタンはapp.componentにあるため、一度だけロードされます。前もって感謝します。

---

マイapp.component.html

<a *ngIf="signedIn==true" [routerLink]="['Logout']">Log out</a> 
<a *ngIf="signedIn==false" [routerLink]="['Login']">Log in</a> 

App.component.ts

export class AppComponent { 
    constructor(private _loginService: LoginService) {} 
    signedIn: boolean = this._loginService.isSignedIn(); 
} 

Answer 1

会員はObservableとして購読し、購読することができます。 this plnkrの例

Answer 2

私はあなたのルーティングを使用しているので、あなたは、このための共有サービスを活用すべきだと思うし、これにはいくつかのコンポーネントが必要です。

これらの間で状態/プロパティを共有したい場合は、状態の変化時に他のコンポーネントに通知するために、オブザーバブル/サブジェクトと共にサービスに追加する必要があります。ここ

サンプルである：

export class LoginService { 
    isSignedIn: boolean; 
    isSignedInSubject: Subject<boolean> = new Subject(); 

    setSignedIn() { 
    this.isSignedIn = true; 
    this.isSignedInSubject.next(true); 
    } 

    setSignedOut() { 
    this.isSignedIn = false; 
    this.isSignedInSubject.next(false); 
    } 
} 

主成分場合signedIn状態変化通知する被写体に加入することができます。詳細については

@Component({ 
    (...) 
    template: ` 
    <a *ngIf="signedIn==true" [routerLink]="['Logout']">Log out</a> 
    <a *ngIf="signedIn==false" [routerLink]="['Login']">Log in</a>  
    ` 
}) 
export class AppComponent { 
    constructor(private _loginService:LoginService) { 
    this._loginService.isSignedInSubject.subscribe(isSignedIn => { 
     this.signedIn = isSignedIn; 
    }); 
    } 
} 

、あなたはこの質問を見てhaverできますRxJSがAngular2でバンドルされているので、私が好きなアプローチはisSignedInを改造することであろう

• Delegation: EventEmitter or Observable in Angular2