angular - 登录后重新加载 Angular 6 组件

Question

我有一个菜单，应该在用户登录后更新。菜单添加在 app.component 的 html 中。

菜单是使用以下代码生成的。

<li *ngFor="let item of menuitems">
     <a class="nav-link" [routerLink]="[item.url]" routerLinkActive="active" {{item.name}}</a>
</li>

用户登录后更改菜单项。我想在用户登录时强制页面重新加载（理想情况下只是该组件）。当我进行手动刷新时，我会得到新菜单。

该组件被添加到主组件。随着使用

<app-menu></app-menu>

菜单项是这样定义的；

async ngOnInit() {
     this.menuitems = await this.menus.getMenu();
}

无论用户是否登录，菜单服务都会返回元素。

我想我必须在登录成功后更新菜单组件，但我不知道如何做到这一点。

标签： angular

Answer 1

这可能是最简单的方法，只需使用 *ngIf来显示或隐藏元素，每次切换状态时，组件都会重新创建并ngOninit再次运行

示例案例

模板

<div>
  <button (click)="login()">login ‍♂️&lt;/button>
</div>

零件

toggle = true;

  constructor(private m:MenuService) {

  }

  login(){
    console.log('logging');
    this.toggle = false;

    this.m.menus = ['admin','log out']; // update menus result
    setTimeout(() => this.toggle = true,1500); // api call 
  }

stackblitz 演示