Angular2 如何在全球范围内观看服务属性？

Question

我已经使用 Angular2 玩了几天，到目前为止我真的很喜欢它。但我似乎无法理解某些事情。

我有一个 class userService，它有 2 个函数（我删除了大部分逻辑。）改变了 IsLoggedIn 属性:

@Injectable()
export class UserService{
    public IsLoggedIn:bool = false

    login(){
        this.IsLoggedIn = true;
    }
    logout(){
        this.IsLoggedIn = false;
    }
}

我想根据 IsLoggedIn 属性在我的全局视图中显示和隐藏一些元素。执行此操作的最佳方法是什么？

Answer 1

在Angular 2 rc.5

1 在您的 AppComponent 中提供服务，这样它就可以在任何地方作为单例使用：

// https://angular.io/docs/ts/latest/guide/ngmodule.html#!#ngmodule-properties
@NgModule({
    imports: [...], 
    declarations: [...],
    providers: [UserService],
    bootstrap: [AppComponent]
})
export default class AppModule {}

2在需要访问服务的组件中注入，然后使用

import {UserService}  from '...';
...
//inject service into the constructor
constructor(private userSvc:UserService){}
...
//to login
this.userSvc.login();

您还可以访问该组件模板中的服务

<div *ngIf="userSvc.isLoggedIn">Protected data </div>

附录:

如果您希望在用户注销时自动更新所有内容，而不是引用布尔值 userSvc.isLoggedIn，请引用对象。

用户服务

state = {
   loggedIn:false,
   ... //other states of the user (eg: permissions, preferences)
};

logout(){ this.state.loggedIn = false }
login() { this.state.loggedIn = true }

然后在您的组件模板中

<div *ngIf="userSvc.state.loggedIn"> Protected data </div>

这是有效的，因为所有引用都指向内存中的相同 state 对象，而在您的原始实现中，您 copied isLoggedIn 的值。请记住：要使其在整个应用程序范围内运行，请仅提供来自 AppModule 的服务。不要将它包含在任何其他模块或组件的 providers 数组中。

Answer 2

根据 isLoggedIn 属性

将服务注入您想要 show/hide 内容的组件

constructor(this.userService:UserService)

<div *ngIf="userService.IsLoggedIn">
  content when logged in
</div>
<div *ngIf="!userService.IsLoggedIn">
  content when not logged in
</div>

更好的是可观察值而不是布尔值。 Observables 在变化检测方面更有效，因为它们主动通知变化。有关详细信息，请参阅 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 3

你只需将 UserService 注入每个组件

constructor(public userService:UserService) {
}

你想在哪里使用它并通过

绑定它

<div *ngIf="userService.IsLoggedIn">hello world</div>

Angular2 如何在全球范围内观看服务属性？

Angular2 how to watch a service property globally?

angular

angular2-services

Angular2 如何在全球范围内观看服务 属性？

Angular2 how to watch a service property globally?

angular

angular2-services

Angular2 如何在全球范围内观看服务属性？