如何在 Angular 6 的不同页面上显示不同的导航栏？

Question

我的应用程序中有 4 个角色。我只是为每个用户分配一个像 1,2,3,4 这样的值，并将登录的用户名和相应的值存储在会话中。

我有一个主页，可以从中导航到其他登录屏幕。在主页中，我需要显示一个导航栏。在不同的登录页面中，我需要显示另一个导航栏，登录后还需要显示另一个。

我正在使用一个通用导航栏，我在 div 中使用 *ngIf 条件来检查存储在会话中的角色并相应地路由导航栏 div。

    <div *ngIf =" role === 'null'" >
      Navbar home
    </div>
    <div *ngIf = "role === '1' ">
      Navbar 1
    </div>
      <div *ngIf = "role === '2'" >
      Navbar 2
    </div>

我的问题是，登录后，我只能看到我的主页导航栏。只有在刷新页面后才能看到导航栏 1。如果我返回导航栏 1，则不会更改为导航栏主页。

任何人都可以帮我解决这个问题。

Answer 1

语法错误，你应该在""

中嵌入条件

<div *ngIf="role==='null'">
      Navbar home
</div>
<div *ngIf="role==='1'">
      Navbar 1
</div>
<div *ngIf="role==='2'">
      Navbar 2
</div>