각 2 전역 변수

Question

모든 구성 요소를 통해 액세스 할 수있는 글로벌 서비스를 설정하려고합니다.이 서비스를 사용하여 역할, 이름 등과 같은 사용자 관련 정보를 저장하고 나중에 모든 구성 요소에서 사용하는 것이 좋습니다.

싱글 톤으로 시도했지만 브라우저 새로 고침 후 명확 해졌습니다.

어떻게이 지침을 달성 할 수 있는가?

싱글 톤 서비스는 다음과 같이이다 :

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

} 

Answer 1

브라우저 새로 고침에서 생존하려면 서비스 지속성 저장소에 상태를 저장해야합니다. 싱글 톤 코드 중 일부를 원래 질문에 추가하면이 코드는 상태를 sessionStorage에 저장하는 코드로 업데이트됩니다.

UPDATE는

우리는 이러한 목표를 달성하기 위해 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 typescript를 사용하면 getter 및 setter 메소드가 아닌 get 및 set 접근자를 선호합니다.

Answer 2

이 해당 서비스 제공 업체가 응용 프로그램을 부트 스트랩 때 지정된 또는 주요 구성 요소의 providers 속성 내에서해야합니다.

bootstrap(AppComponent, [ GlobalService ]); 

또는

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

모든 구성 요소는 서비스의 동일한 인스턴스를 공유 할 것입니다 이런 식으로.