Угловая 2 - Обновить вид при изменении переменной

Question

У меня есть кнопка на панели навигации (app.component.html), которую я хочу показывать только при входе пользователя. Это мой текущий подход, который не работает для очевидные резоны объясняются позже. Я хочу, чтобы узнать, как я могу модифицировать его для работы

Внутри моей app.component.html я кнопка включения

следующей

<button *ngIf="isCurrentUserExist">MyButton</button> 

Внутри моего app.component.ts, я пытаюсь объять переменная isCurrentUserExist для функции, которая возвращает true, если пользователь существует. Я считаю, что это проблема, потому что этот код выполняется только один раз в OnInit, как противостоять какой-то образом сохраняя вид обновленный

ngOnInit() { 
    this.isCurrentUserExist = this.userService.isCurrentUserExist();  
} 

Для referenrce, в моем UserService.ts экспорта класс UserService {

private currentUser: User 

    constructor(private http: Http,private angularFire: AngularFire) { } 

    getCurrentUser(): User { 
     return this.currentUser 
    } 

    setCurrentUser(user: User) { 
     this.currentUser = user; 
    } 

    isCurrentUserExist(): boolean { 
     if (this.currentUser) { 
     return true 
     } 
     return false 
    } 
} 

Abit больше информации о моем приложении ... При запуске, когда пользователь не существует, у меня есть экран входа в систему (компонент входа). Когда пользователь входит в систему, он идет к firebase и захватить информацию о пользователе (асинхронной) и сохранить его в моей службе пользователя через

setCurrentUser(user: User) 

Так что на данный момент, я хотел бы обновить кнопку в моей панели навигации (который существует в app.component.html) и покажите кнопку.

Что я могу сделать для этого?

Answer 1

давайте попробуем это: с помощью BehaviorSubject

UserService.ts

import { Subject, BehaviorSubject} from 'rxjs'; 

export class UserService { 

    private currentUser: User; 
    public loggedIn: Subject = new BehaviorSubject<boolean>(false); 

    constructor(private http: Http,private angularFire: AngularFire) { } 

    getCurrentUser(): User { 
     return this.currentUser 
    } 

    setCurrentUser(user: User) { // this method must call when async process - grab firebase info - finished 
     this.currentUser = user; 
     this.loggedIn.next(true); 
    } 

    isCurrentUserExist(): boolean { 
     if (this.currentUser) { 
     return true 
     } 
     return false 
    } 
} 

app.component.ts

ngOnInit() { 
    this.userService.loggedIn.subscribe(response => this.isCurrentUserExist = response);  
} 

Answer 2

в app.component.ts вам назначено значение из функции один раз. Поэтому он никогда не изменится. Для решения этой проблемы и для обновления в реальном времени используйте назначение экземпляра функции с логической переменной this.isCurrentUserExist = this.userService.isCurrentUserExist;. И в виду изменение изменения *ngIf выражение как функция isCurrentUserExist().