Angular 2：创建一个全局的，可设置的，可观察的属性？

Question

我有一个Angular 2应用程序（使用v2.1.0）和一个身份验证服务，允许用户登录和注销该应用程序。我想创建一个全局可用的布尔属性，可以在用户登录或注销时设置，以便我可以根据用户的状态轻松显示和隐藏部分UI。像isAuthenticated这样的东西会很好。但是，我并不完全确定创建全局类/服务的最佳方法是什么，或者推荐的方法是什么。我找到了this问题，这确实解决了这个问题，但所有的答案都是在最终版本发布之前完成的，我相信它已经过时了。目前，我在每个组件上都有一个属性，我需要跟踪返回到身份验证服务的登录状态，但对我来说似乎效率低下：

IsAuthenticated: boolean = this.authService.isAuthenticated();

Answer 1

您可以尝试使用* ngIf添加或删除元素|隐藏或显示元素的可见性

<div *ngIf="IsAuthenticated">Content</div> //add or remove

<div [class.hidden]="!IsAuthenticated">Show with class</div> //show or hide

了解更多细节 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngIf

Answer 2

首先，您需要在app.module提供程序上声明您的authService。所有应用程序的1个authService实例。

接下来你可以这样做：

<a *ngIf="!authService.isAuthenticated()" [routerLink]="['/login']">Login</a>

Answer 3

为您的服务添加一个布尔属性，并将其默认为false。当用户登录时将其设置为true。在服务中创建一个函数以返回布尔值。然后就像调用登录函数一样调用它。

服务是单身，只做你想要的。