Data binding 如何在Angular 2中定义全局变量，以便在模板中使用它们进行属性绑定？

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

我遇到的问题是，属性绑定的工作方式与我的工作方式不同，如下所示

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

app-global.ts

在登录组件中，我导入AppGlobals

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

并通过设置登录状态

这是。_appGlobals.setLoginStatustrue

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

我定义了类组件的属性

isLoggedIn:boolean=this.\u 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）设置登录状态时，它会显示在每个页面中

编辑我尝试应用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.startWithfalse

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

第13行的错误来自

this.isUserLoggedIn.emitisLoggedIn

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

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

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

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

但是

this.\u appGlobals.isUserLoggedIn.subscribevalue=>this.isLoggedIn=value

返回类型错误：

分配的表达式类型布尔值不能分配给类型BehaviorSubject

isLoggedIn:boolean=this.\u appGlobals.isUserLoggedIn； 是在执行此行时复制值的一次性操作。如果希望传播后续更改，请使用可观察项

从“rxjs/Observable”导入{Observable}； 导入“rxjs/add/operator/share”； 导入'rxjs/add/operator/startWith'； 从'rxjs/BehaviorSubject'导入{BehaviorSubject}； @注射的 导出类AppGlobals{ //将此属性用于属性绑定 public isUserLoggedIn:BehaviorSubject=new BehaviorSubjectfalse； setLoginStatusisLoggedIn{ this.isUserLoggedIn.nextisLoggedIn； } } 然后像这样使用它：

导出类登录组件{ constructorprivate\u appGlobals:appGlobals{ this.\u appGlobals.isUserLoggedIn.subscribevalue=>this.isLoggedIn=value； }

---

另请参见

也有类似的需求，最终通过简单的getter实现了这一点，并且它在模板->更改传播.less代码中绑定了属性

您可以直接设置全局变量，也可以在Globals类中实现setters/getter

环球酒店

app.component.ts

app.component.html

---

谢谢你的回答。但是有些东西工作不正常。请通过更新的问题进行检查抱歉，应该是下一个而不是下一个。我意识到这是我的错误。在可观察的初始化中，我将其设置为true而不是false。现在它正在工作缺少导入{Injectable}来自@angular/core；非常聪明。我会将主题设置为私有，并添加一个getter将其作为可观察对象返回，因此人们被迫使用set方法发送通知，而不是直接使用主题。

export class Globals{
    public static server_call_in_progress:boolean = true;
}

import {Globals} from "./shared/globals";    
export class AppComponent{  
    constructor(){}
    ngOnInit(){}

    get server_call_in_progress(){
        return Globals.server_call_in_progress;
    }
}

<div *ngIf="server_call_in_progress">
    <div class="loader"></div>
</div>