Как изменить динамический просмотр страницы в угловом2?

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

С RxJS поставляемым с использованием Angular2 подход, который я хотел бы, чтобы реконструировать isSignedIn член как Наблюдаемый и подписаться на него. Пример в 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 взглянуть на этот вопрос:

• Delegation: EventEmitter or Observable in Angular2