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

Question

我目前正在从事Angular 2项目。 我实现了两个组件（1.标头和2.显示页面内容）。 如果我打开服务，我将从登录/注册开始。 目前，我想隐藏所有其他菜单项。 如果我已登录，则要显示所有菜单项。

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

目前，我以这种方式检查是否登录：

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

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

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

Answer 1

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

如果此时您不喜欢ngif解决方案，则可以选择以下几种方法：您可以创建一个全新的组件并将其显示在仅当用户登录时才可访问的路由中，或者可以执行诸如create的操作菜单项数组，用于控制导航菜单项并运行ngfor。

您需要回答更多问题的问题，例如您当前在哪里跟踪用户状态（您的用户变量）以及如何通知组件此变量发生变化？ 仅凭猜测，您可能是根据构造函数中的本地存储或标题中的oninit函数设置用户变量，然后将其保留。 这将导致它一次获得用户的值，但以后不会更新，这就是为什么它将在页面刷新时正确显示的原因。