Angular 成功登录后未呈现角度组件

Angular 成功登录后未呈现角度组件,angular,angular-routing,angular-components,angular-router-guards,Angular,Angular Routing,Angular Components,Angular Router Guards,菜单组件(应仅在成功登录后可见) 菜单组件模板 <nav role="navigation" *ngIf="isLoggedIn"> <ul><li>Admin Menu Item</li></ul> </nav> <div class="content"> <div class="wrapper"> <div class="row"> <app-m

菜单组件(应仅在成功登录后可见)

菜单组件模板

<nav role="navigation" *ngIf="isLoggedIn">
    <ul><li>Admin Menu Item</li></ul>
</nav>
<div class="content">
  <div class="wrapper">
    <div class="row">
      <app-menu></app-menu>
    </div>
  </div>
</div>
主要内容组件模板

<nav role="navigation" *ngIf="isLoggedIn">
    <ul><li>Admin Menu Item</li></ul>
</nav>
<div class="content">
  <div class="wrapper">
    <div class="row">
      <app-menu></app-menu>
    </div>
  </div>
</div>

应用程序组件模板

我考虑使用
*ngIf
指令来处理菜单组件的可见性,这取决于用户是否登录。从上面的代码中可以看出,属性
isLoggedIn
loggedIn()
函数中获得一个布尔值


我认为这一点非常简单,但问题是成功登录后菜单组件不会立即显示,我必须刷新浏览器才能看到菜单。不太清楚为什么这里会出现这种情况。有什么建议或想法吗?

这是因为菜单组件中的loggedIn值仅在ngOnInit中设置

改用getter,如下所示:

export class MenuComponent implements OnInit {

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

  ngOnInit() {
  }
}

谢谢你的及时回复。是的,你完全正确。使用getter确实可以解决问题。您可以像下面这样直接使用authService.loggedIn()