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

Posted 2023-03-13

【中文标题】成功登录后未呈现角度组件

【英文标题】：Angular component not rendered after successful login

【发布时间】：2017-12-03 21:43:37

【问题描述】：

菜单组件（应仅在成功登录后可见）

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() 函数的布尔值。

到目前为止，我认为一切都很简单，但问题是菜单组件在成功登录后没有立即显示，我必须刷新浏览器才能看到菜单。不太清楚为什么会出现这种情况。有什么建议或想法吗？

【问题讨论】：

你可以像这样直接使用 authService.loggedIn() <nav role="navigation" *ngIf="authService.loggedIn()">

【参考方案1】：

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

改为使用 getter，如下所示：

export class MenuComponent implements OnInit 

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

  ngOnInit() 
  

【讨论】：

感谢您的及时回复。是的，你完全正确。使用 getter 确实可以解决问题。