Angular 10、不同类型用户导航问题header

Question

我在 web 页面上有一个 header，根据用户类型（普通或管理员）显示具有 2 种不同操作的导航 header，管理员可以看到所有注册用户及其预订，而普通用户可以看到他们的预订并可以预订。 我使用“* ngIf”来显示不同的 header，但是在使用普通用户登录时，它向我显示了管理员的 header 以及更多“总是在 header 中”我有注销按钮，它显示了一条带有“用户”名称的欢迎消息谁访问但如果我不更新页面是看不到的。 我该如何解决？ 谢谢你。

应用组件： https://i.stack.imgur.com/v9tA5.png

header: https://i.stack.imgur.com/yOerJ.png

Answer 1

如果您发布 ts 组件文件以查看权限如何到达，效率会更高。 一个建议是统一代码块，只检查菜单项的权限。 以避免重复代码。

<div *ngIf="loggedUser">
    <ul>
      <li *ngIf="isAdmin">
        <a>LINK1</a>
      </li>
      <li *ngIf="!isAdmin">
        <a>LINK2</a>
      </li>
    </ul>
</div>