Question

我正在尝试设置一个可以通过所有组件访问的全局服务，我希望使用此服务（如角色，名称等）存储用户相关信息，并在以后的所有组件中使用

我尝试使用单例，但在浏览器刷新后它已经清楚了。

如何实现这一点任何指导将不胜感激。

单身人士服务是这样的：

    export class Principal{
    private isAuthenticated: boolean = false;
    private roles: Array<String>;
    private fullName: String;
    constructor(){} ;
    // getter and setter

}

Answer 1

如果要在浏览器刷新后继续存在，您需要让服务单例在浏览器持久性存储中保存其状态。将您的一些单例代码添加到原始问题中，我将使用在sessionStorage中保存其状态的代码更新此答案。

<强>更新

我们可以使用angular2-localStorage模块来完成此任务。

export class Principal{
    @SessionStorage() private isAuthenticated: boolean = false;
    @SessionStorage() private roles: Array<String>;
    @SessionStorage() private fullName: String;
    constructor(){} ;
    // getter and setter
}

请注意

请勿在此处存储任何敏感值。您的后端API不应信任任何这些值，因为最终用户可以轻松更改这些值。

使用idomatic打字稿，您应该更喜欢get和set访问者，而不是getter和setter方法。

Answer 2

必须在引导应用程序时或在主要组件的providers属性中指定此相应的服务提供程序。

bootstrap(AppComponent, [ GlobalService ]);

或

@Component({
  (...)
  providers: [ GlobalService ]
})
export class AppComponent {
}

这样，您的所有组件都将共享相同的服务实例。

Angular 2全局变量

2 个答案: