Angular 成功登录后组件未呈现

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 中设置。

改用 getter，像这样：

export class MenuComponent implements OnInit {

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

  ngOnInit() {
  }
}

Angular 成功登录后组件未呈现

Angular component not rendered after successful login

angular

angular-routing

angular-components

angular-router-guards