如何在Angular 2中定义全局变量,我可以将它们用于模板中的属性绑定？

Question

在我的Angular 2(beta 14)应用程序中,我需要跟踪用户登录状态以隐藏/显示某些元素.

我得到的问题是属性绑定不像我做的那样工作如下.

我创建了一个用于存储和更新全局变量的类:

APP-global.ts

 import {Injectable} from "angular2/core";

 @Injectable() export class AppGlobals {
   // use this property for property binding
   public isUserLoggedIn: boolean = false;

   setLoginStatus(isLoggedIn){
       this.isUserLoggedIn = isLoggedIn;
   }

   getLoginStatus(){
       return this.isUserLoggedIn;
   } }

在登录组件中,我导入了AppGlobals

export class LoginComponent {
    constructor(private _appGlobals: AppGlobals) { }

并设置登录状态

this._appGlobals.setLoginStatus(真);

在另一个组件中,我像在LoginComponent中那样注入AppGlobals

我定义了一个类(组件)的属性

isLoggedIn:boolean = this._appGlobals.isUserLoggedIn; //我也尝试使用getter而不是public属性(见上文)

然后我在组件的模板中使用它来显示/隐藏某个元素:

<!-- here I also tried with {{!isLoggedIn}} but results in a syntax error whereas using [(hidden)] instead of [hidden] changes nothing -->
<div id="some-element" [hidden] = "!isLoggedIn">

最后,绑定有效,但是当另一个组件(例如LoginComponent)设置登录状态时,没有更新(此组件是AppComponent模板的一部分并显示在每个页面中).

编辑我试图应用Gunter的答案,但我得到以下错误:

app/app-globals.ts(10,54): error TS2346: Supplied parameters do not match any signature of call target.
app/app-globals.ts(13,29): error TS2339: Property 'emit' does not exist on type 'BehaviorSubject<boolean>'.

第10行的错误来自[求助]

public isUserLoggedIn:BehaviorSubject = new BehaviorSubject().startWith(false);

它显然是由BehaviorSubject期望1个参数引起的

第13行的错误来自

this.isUserLoggedIn.emit(isLoggedIn);

它显然是由一个不存在的发射方法引起的.

另外,我不明白我应该如何使用AppGlobals使属性绑定自动更新另一个组件(参见EDIT之前的最后一个例子)

此外,在LoginComponent中,我用BehaviorSubject替换了isLoggedIn布尔类型,因为isUserLoggedIn在AppGlobals中具有类型BehaviorSubject

但

this._appGlobals.isUserLoggedIn.subscribe(value => this.isLoggedIn = value);

返回TypeError:

分配的表达式类型boolean不能分配给BehaviorSubject类型

Answer 1

isLoggedIn: boolean = this._appGlobals.isUserLoggedIn;

是一次性操作,在执行此行时复制值.如果您希望传播后续更改,请使用observables

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/startWith';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable() 
export class AppGlobals {
// use this property for property binding
  public isUserLoggedIn:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  setLoginStatus(isLoggedIn){
   this.isUserLoggedIn.next(isLoggedIn);
  }
}

并使用它像:

export class LoginComponent {
    constructor(private _appGlobals: AppGlobals) {
  this._appGlobals.isUserLoggedIn.subscribe(value => this.isLoggedIn = value);
}

另请参见/sf/answers/2489824711/