成功登錄后未渲染角度組件

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

這是因為菜單組件中的loggingIn值僅在ngOnInit中設置。

改用吸氣劑，如下所示：

export class MenuComponent implements OnInit {

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

  ngOnInit() {
  }
}