data-binding - 如何以我可以将它们用于模板中的属性绑定(bind)的方式在 Angular 2 中定义全局变量？

Question

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

我遇到的问题是属性绑定(bind)没有按照我的方式工作。

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

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(true);

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

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

isLoggedIn: boolean = this._appGlobals.isUserLoggedIn; // I also tried by using the getter instead of the public property (see above)

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

<!-- 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)设置登录状态时，绑定(bind)有效但没有更新(此组件是 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);

这显然是由不存在的 emit 方法引起的。

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

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

但是

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

返回类型错误:

Assigned expression type boolean is not assignable to type BehaviorSubject

Answer 1

isLoggedIn: boolean = this._appGlobals.isUserLoggedIn;

是一次性 Action ，它复制执行该行时的值。如果您希望传播后续更改，请使用可观察对象

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