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

时间:2017-07-19 20:52:06

标签: javascript html angular angular2-routing angular2-services

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

目前,我使用* ngIf来显示和隐藏菜单项,实际上是什么。我的问题是,如果我启动页面并且我没有登录,则菜单项不在那里(这没关系)。但是,如果我登录,只有包含页面内容的容器正在更改内容而不是菜单栏...

目前,我会以这种方式检查我是否登录:



  lon lat 1991-05-01 1991-05-02 1991-05-04
1   1   1          1          1          1
2   2   2          2          2          2
3   3   3          3          3          3
4   4   4          4          4          4
5   5   5          5          5          5




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

你能帮助我解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

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

如果您不喜欢ngif解决方案,那么您有几个选择:您可以创建一个全新的组件,并在只有用户登录时才能访问的路径中显示该组件,或者您可以做一些事情,比如创建一个控制导航菜单项的菜单项数组并运行一个ngfor。

您应该回答以获得更多帮助的问题,例如您当前在哪里跟踪用户状态(您的用户变量)以及如何通知组件变更这些变量?通过猜测,您可能是基于构造函数中的本地存储或标头中的oninit函数设置用户变量,然后将其保留。这将导致它获取用户的值一次但不会在以后更新,这就是它将在页面刷新时正确显示的原因。

相关问题