在 Angular 2 中动态显示/隐藏菜单栏
Show / Hide menu bar dynamically in Angular 2
我目前正在做一个 Angular 2 项目。我实现了两个组件（1. header 和 2. 显示页面内容）。
如果我打开服务，我会从登录/注册开始。这时，我想隐藏所有其他菜单项。
如果我 logged-in，我想显示所有菜单项。
目前，我正在使用 *ngIf 来显示和隐藏菜单项，这确实有效。我的问题是，如果我启动该页面但我不是 logged-in，则菜单项不存在（这很好）。但是，如果我登录，只有页面内容的容器正在更改内容，而不是菜单栏...
目前我是这样查看是否登录的：
<div *ngIf="user != null">
...menu items...
</div>
如果我重新加载整个页面，这会起作用 - 但我认为应该有更好的方式来实时显示/隐藏菜单项，而无需手动刷新？
你能帮我解决这个问题吗？
您可能应该创建一个全局用户服务来跟踪用户状态，并且组件可以订阅该服务，以便始终实时更新用户登录或未登录的位置。
如果此时您不喜欢 ngif 解决方案，您有几个选择：您可以创建一个全新的组件并将其显示在只有在用户登录时才能访问的路由中，或者您可以做一些事情，比如创建一个菜单项数组来控制你的导航菜单项和 运行 一个 ngfor。
您应该回答的问题以获得更多帮助，例如您目前在哪里跟踪用户状态（您的用户变量）以及如何通知组件此变量发生变化？只是猜测，您可能在 header 中的构造函数或 oninit 函数中基于本地存储设置用户变量，然后离开它。这将导致它只获取用户一次的值但以后不会更新它，这就是为什么它会在页面刷新时正确显示的原因。
我目前正在做一个 Angular 2 项目。我实现了两个组件（1. header 和 2. 显示页面内容）。 如果我打开服务，我会从登录/注册开始。这时，我想隐藏所有其他菜单项。 如果我 logged-in，我想显示所有菜单项。
目前，我正在使用 *ngIf 来显示和隐藏菜单项，这确实有效。我的问题是，如果我启动该页面但我不是 logged-in，则菜单项不存在（这很好）。但是，如果我登录，只有页面内容的容器正在更改内容，而不是菜单栏...
目前我是这样查看是否登录的：
<div *ngIf="user != null">
...menu items...
</div>
如果我重新加载整个页面，这会起作用 - 但我认为应该有更好的方式来实时显示/隐藏菜单项，而无需手动刷新？
你能帮我解决这个问题吗？
您可能应该创建一个全局用户服务来跟踪用户状态，并且组件可以订阅该服务，以便始终实时更新用户登录或未登录的位置。
如果此时您不喜欢 ngif 解决方案，您有几个选择：您可以创建一个全新的组件并将其显示在只有在用户登录时才能访问的路由中，或者您可以做一些事情，比如创建一个菜单项数组来控制你的导航菜单项和 运行 一个 ngfor。
您应该回答的问题以获得更多帮助，例如您目前在哪里跟踪用户状态（您的用户变量）以及如何通知组件此变量发生变化？只是猜测，您可能在 header 中的构造函数或 oninit 函数中基于本地存储设置用户变量，然后离开它。这将导致它只获取用户一次的值但以后不会更新它，这就是为什么它会在页面刷新时正确显示的原因。