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

在我的 Angular 2（beta 14）应用程序中，我需要跟踪用户登录状态以便隐藏/显示某些元素。

我遇到的问题是属性绑定没有按照我的方式工作，如下所示。

我创建了一个类来存储和更新全局变量：

应用程序全局.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(true);

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

我定义了一个类（组件）的属性

isLoggedIn: boolean = this._appGlobals.isUserLoggedIn; // 我还尝试使用 getter 而不是公共属性（见上文）

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

<!-- 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">

最后，绑定起作用了，但是没有更新（此组件是 AppComponent 模板的一部分，并显示在每个页面中）当另一个组件（例如 LoginComponent）设置登录状态时。

EDIT我尝试应用 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 行的错误来自 [已解决]

公共 isUserLoggedIn:BehaviorSubject = new BehaviorSubject().startWith(false);

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

第 13 行的错误来自

this.isUserLoggedIn.emit(isLoggedIn);

这显然是由不存在的emit method.

另外，我不明白如何使用 AppGlobals 以便属性绑定在另一个组件中自动更新（请参阅编辑之前的最后一个示例）

此外，在 LoginComponent 中，我将 isLoggedIn 布尔类型替换为行为主体因为 isUserLoggedIn 在 AppGlobals 中具有 BehaviourSubject 类型

but

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

返回类型错误：

指定的表达式类型 boolean 不可指定给BehaviorSubject 类型

isLoggedIn: boolean = this._appGlobals.isUserLoggedIn;

是一次性操作，在执行该行时复制值。如果您希望传播后续更改，请使用可观察量

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);
}

也可以看看https://stackoverflow.com/a/35568924/217408 https://stackoverflow.com/a/35568924/217408