I'm currently working on a Angular 2 project. I implemented two components (1. header and 2. display page content). If I open the service, I start with login / register. At this time, I want to hide all other menu items. If I'm logged-in, I want to show all menu items.
我目前正在开展一个Angular 2项目。我实现了两个组件（1.标题和2.显示页面内容）。如果我打开服务，我从登录/注册开始。这时，我想隐藏所有其他菜单项。如果我已登录，我想显示所有菜单项。
Currently, I'm using *ngIf to show and hide the the menu items, what actually works. My problem is, that if I start the page and I'm not logged-in, the menu items aren't there (this is fine). However, if I login, just the container with the page content is changing the content and not the menu bar...
目前，我正在使用* ngIf来显示和隐藏菜单项，实际上是什么。我的问题是，如果我启动页面并且我没有登录，则菜单项不存在（这很好）。但是，如果我登录，只有包含页面内容的容器正在更改内容而不是菜单栏...
Currently, I check if I'm logged in or not in this way:
目前，我以这种方式检查我是否登录：
<div *ngIf="user != null">
...menu items...
</div>This works if I reload the whole page - but I think there should be a nicer way to display / hide the menu items in real time without manual refreshing?
如果我重新加载整个页面，这是有效的 - 但我认为应该有一种更好的方式来实时显示/隐藏菜单项而无需手动刷新？
Could you kindly help me how I can solve this issue?
你能帮助我解决这个问题吗？
1 个解决方案
#1
1
You should probably create a global user service which tracks user state and that components can subscribe to in order to always have a real time updates regarding where the user is logged in or not.
您应该创建一个全局用户服务来跟踪用户状态，并且组件可以订阅，以便始终有关于用户登录位置的实时更新。
If you don't like the ngif solution at that point, you have a few options: you can create an entirely new component and display that in a route that is only accessible when the user is logged in, or you can do something like create a menu items array that controls your navigation menu items and run an ngfor.
如果你当时不喜欢ngif解决方案，你有几个选择：你可以创建一个全新的组件，并在只有用户登录时才能访问的路径中显示，或者你可以做一些像创建一个菜单项数组，用于控制导航菜单项并运行ngfor。
Questions you should answer for more help are things like where are you currently tracking user state (your user variable) and how are components being notified of this variable changing? Just by guessing, you are probably setting the user variable based on local storage in a constructor or oninit function in your header and then leaving it. This will cause it to get the value of user one time but not update it later, which is why it will properly display on page refresh.
您应该回答以获得更多帮助的问题包括您当前在哪里跟踪用户状态（您的用户变量）以及如何通知组件变更的组件？只是猜测，你可能是根据构造函数中的本地存储或头文件中的oninit函数设置用户变量，然后离开它。这将导致它获取用户的值一次但不会在以后更新，这就是它将在页面刷新时正确显示的原因。
#1
1
You should probably create a global user service which tracks user state and that components can subscribe to in order to always have a real time updates regarding where the user is logged in or not.
您应该创建一个全局用户服务来跟踪用户状态，并且组件可以订阅，以便始终有关于用户登录位置的实时更新。
If you don't like the ngif solution at that point, you have a few options: you can create an entirely new component and display that in a route that is only accessible when the user is logged in, or you can do something like create a menu items array that controls your navigation menu items and run an ngfor.
如果你当时不喜欢ngif解决方案，你有几个选择：你可以创建一个全新的组件，并在只有用户登录时才能访问的路径中显示，或者你可以做一些像创建一个菜单项数组，用于控制导航菜单项并运行ngfor。
Questions you should answer for more help are things like where are you currently tracking user state (your user variable) and how are components being notified of this variable changing? Just by guessing, you are probably setting the user variable based on local storage in a constructor or oninit function in your header and then leaving it. This will cause it to get the value of user one time but not update it later, which is why it will properly display on page refresh.
您应该回答以获得更多帮助的问题包括您当前在哪里跟踪用户状态（您的用户变量）以及如何通知组件变更的组件？只是猜测，你可能是根据构造函数中的本地存储或头文件中的oninit函数设置用户变量，然后离开它。这将导致它获取用户的值一次但不会在以后更新，这就是它将在页面刷新时正确显示的原因。