Angular 2全局变量

Question

I am trying to set up a global service which can be accessed through out all the components, precisely I wish to store user related information using this service like roles, name etc. and use it later in all components

I have tried with singleton, but It got clear after browser refresh.

How to achieve this any guidance will be appreciated.

The singleton service is like this:

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

}

Answer 1

You will need to have your service singleton save its state in a browser persistence storage if it is to survive a browser refresh. Add some of your singleton code to your original question and I will update this answer with code that saves its state in sessionStorage ;

UPDATE

We can use the angular2-localStorage module to accomplish this.

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

PLEASE NOTE

Do not store any sensitive values here. Your backend API should NOT trust any of these values as the end user can easily change these.

With idomatic typescript you should prefer get and set accessors rather than getter and setter methods.

Answer 2

This corresponding service provider must be specified when bootstrapping your application or within the providers attribute of the main component.

bootstrap(AppComponent, [ GlobalService ]);

or

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

This way all your components will share the same instance of the service.