Question

我已经和Angular2玩了几天了，到目前为止我真的很喜欢它。但我似乎无法绕过某些东西。

我有一个带有2个函数的类userService（我删除了大多数逻辑。），它们改变了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，请参阅对象。

<强> UserService

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对象，而在原始实现中，您复制了 isLoggedIn的值。请注意：要在整个应用范围内工作，请仅从AppModule提供服务。不要将它包含在任何其他模块或组件的providers数组中。

Answer 2

您只需将UserService注入每个组件

constructor(public userService:UserService) {
}

你想要使用它并通过

绑定它

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

Answer 3

根据isLoggedIn属性

将服务注入要显示/隐藏内容的组件

constructor(this.userService:UserService)

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

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

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

3 个答案: