javascript - 在 Angular 2 中动态显示/隐藏菜单栏

Question

我目前正在开发 Angular 2 项目。我实现了两个组件(1.标题和2.显示页面内容)。如果我打开该服务，我会从登录/注册开始。这时，我想隐藏所有其他菜单项。如果我已登录，我想显示所有菜单项。

目前，我正在使用 *ngIf 来显示和隐藏菜单项，这实际上是有效的。我的问题是，如果我启动页面并且未登录，则菜单项不存在(这很好)。但是，如果我登录，只有包含页面内容的容器正在更改内容，而不是菜单栏...

目前，我通过以下方式检查我是否登录:

<div *ngIf="user != null">
...menu items...
</div>

如果我重新加载整个页面，这会起作用 - 但我认为应该有更好的方法来实时显示/隐藏菜单项，而无需手动刷新？

您能帮我解决这个问题吗？

Answer 1

您可能应该创建一个全局用户服务来跟踪用户状态并且组件可以订阅该服务，以便始终获得有关用户登录或未登录位置的实时更新。

如果您当时不喜欢 ngif 解决方案，您有几个选择:您可以创建一个全新的组件并将其显示在仅当用户登录时才能访问的路由中，或者您可以这样做类似创建一个菜单项数组来控制导航菜单项并运行 ngfor。

为了获得更多帮助，您应该回答的问题包括您当前在哪里跟踪用户状态(您的用户变量)以及如何通知组件此变量发生变化？仅通过猜测，您可能会根据构造函数中的本地存储或 header 中的 oninit 函数设置用户变量，然后保留它。这会导致它只获取一次 user 的值，但稍后不会更新它，这就是为什么它会在页面刷新时正确显示。