登录后重新加载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();
}

如果用户已登录，菜单服务将返回元素。

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

Answer 1

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

示例案例

模板

<div>
  <button (click)="login()">login 👮‍♂️</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 demo 🚨🚨

Answer 2

如果组件具有从父组件传递的任何输入参数，该组件在成功登录时发生更改，那么您可以实现OnChanges接口，需要定义ngOnChanges事件，该事件将在输入参数更改时执行。

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