Угловой компонент не отображается после успешного входа

Question

Компонент меню (должен быть виден только после успешного входа в систему)

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../../services/auth.service';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html'
})
export class MenuComponent implements OnInit {

  public isLoggedIn = false;
  constructor(private authService: AuthService, public router: Router) {
    this.isLoggedIn = authService.loggedIn();
  }

  ngOnInit() {
  }
}

Шаблон компонента меню

<nav role="navigation" *ngIf="isLoggedIn">
    <ul><li>Admin Menu Item</li></ul>
</nav>

Основное содержание компонента

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-main-content',
  templateUrl: './main-content.component.html'
})
export class MainContentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Шаблон основного содержимого компонента

<div class="content">
  <div class="wrapper">
    <div class="row">
      <app-menu></app-menu>
    </div>
  </div>
</div>

Шаблон компонента приложения

Я смотрел на использование *ngIf директива для обработки видимости компонента меню, в зависимости от того, вошел ли пользователь в систему или нет. Как видно из приведенного выше кода, свойство isLoggedIn присваивается с логическим значением из loggedIn() функция.

Я думаю, что все довольно просто в этом вопросе, но проблема в том, что компонент меню не отображается сразу после успешного входа в систему, и мне придется обновить браузер, чтобы увидеть меню. Не совсем уверен, почему это так здесь. Есть предложения или идеи?

Answer 1

Это связано с тем, что значение loggedIn в вашем компоненте меню задается только в ngOnInit.

Вместо этого используйте геттер, вот так:

export class MenuComponent implements OnInit {

  public get loggedIn() { return this.authService.loggedIn(); }
  constructor(private authService: AuthService, public router: Router) {
  }

  ngOnInit() {
  }
}