Angular 2全球变量，例如Isloggedin或Userroles

Question

在angular2中维护全局变量的最佳方法是什么。我找不到在应用程序中维护全局变量的方法。用户登录到应用程序后，我需要User对象，该对象在所有其他组件中都具有用户详细信息和isLoggedIn值。这是我在做的...

@Injectable()
export class AppGlobals {
    public isUserLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    public currentUser: BehaviorSubject<User> = new BehaviorSubject<User>(null);
    setLoginStatus(isLoggedIn) {
        this.isUserLoggedIn.next(isLoggedIn);
    }
    setCurrentUser(currentUser) {
        this.currentUser.next(currentUser);
    }
}

在logincomponent中，我正在设置user和isLoggedIn成功登录时的详细信息

login() {
    this.authenticationService.login(this.model.username, this.model.password)
        .subscribe(
        data => {
            this.appGlobals.setLoginStatus(true);
            this.appGlobals.setCurrentUser(data);
            this.router.navigate([this.returnUrl]);
        },
        error => {
            this.alertService.error(error);
            this.loading = false;
        });
}

并访问其他组件中的值....

export class ProductsComponent {
    currentUser: User;
    isLoggedIn: boolean;
    constructor(private productService: ProductService, private router:Router,
        private confirmationService: ConfirmationService,
        private auth: AuthenticationService,
        private appGlobal: AppGlobals) {
        appGlobal.isUserLoggedIn.subscribe(value => {this.isLoggedIn = value; console.log(value);});  // should be true
        appGlobal.currentUser.subscribe(value => {console.log(value); this.userRole = value}); // should have user data
        .....
    }
    .....
}

在ProductsComponent和currentUser的CC_6中，第一次是正确的，但是当我刷新浏览器时，我将获得false for isLoggedIn和null for user。不知道我在做什么错和在哪里。维护所有组件的用户和loggedin状态是否完全错误？我不想选择sessionStorage或localStorage。请建议。谢谢。

Answer 1

为什么不使用localstorage

登录时，您会设置LocalStorage

localStorage.setItem('currentUser', JSON.stringify({ email: email, id: id }));

任何需要用户登录的组件检查localstorage

localStorage.getItem('currentUser')

和注销

localStorage.removeItem('currentUser');

Answer 2

只需使用您在AppModule中提供的服务即可。它将是一个单身人士，并且在您的整个应用程序中都可以使用，并且具有与Angular应用程序相同的寿命。

每个组件，指令，管道和服务都可以注入它以访问其状态或订阅其可观察到的。