在Angular / typescript中将静态变量（超出范围）绑定到html答案

【问题标题】：Bind static variable (out of scope) to html in Angular / typescript在Angular / typescript中将静态变量（超出范围）绑定到html
【发布时间】：2015-10-08 00:10:46
【问题描述】：

我创建了一个小型测试 typescript/angularjs 网站。

我有一个带有静态变量的模块，我想将它绑定到 html 文档，以便我可以看到当前登录的用户。

module mytest.constants {

    export class CurrentSession {

        public static CURRENT_USER: string = "Tobi";

    }
}

问题是：当前范围是一个控制器，它与我的 CurrentSession 类分开。

我想做类似的事情

<div class="label" style="color:green">
  Logged in as: {{mytest.constants.CurrentSession.CURRENT_USER}}
</div>

我可以做的另一种方法是向控制器添加一个类成员并将其设置在构造函数中，例如：

this.CurrentUSer = mytest.constants.CurrentSession.CURRENT_USER

但我更愿意将静态变量直接绑定到 html 文件。

这可能吗？

【问题讨论】：

标签： angularjs typescript

【解决方案1】：

您不能像这样绑定静态属性，Angular 只是不会在其摘要周期中检查这些属性。但是，您可以创建对类本身的范围/this 引用。像这样的：

module mytest.constants {

    export class CurrentSession {

        public static CURRENT_USER: string = "Tobi";

        CurrentSession = CurrentSession;

    }
}

所以基本上它会创建自己的属性，如this.CurrentSession = CurrentSession。

然后在模板中（假设您使用session 引用控制器实例的controllerAs 语法）您将能够将CURRENT_USER 绑定为

<div>{{session.CurrentSession.CURRENT_USER}}</div>

【讨论】：

【解决方案2】：

感谢 dfsq 的快速回答。

我终于找到了另一个解决方案。

我首先在我的 app.ts 中设置了一个名为“CurrentSession”的变量，并将值设置为我的对象的一个新实例

angular.module("app", [])
    .constant("CurrentSession", new mytest.constants.CurrentSession())

然后我可以像这样在我的控制器中注入这个常量：

export class MainCtrl {

    public static $inject = ["$state", "$http", "CurrentSession"];

    constructor($state, $http, private CurrentSession) {
      ...
    }

这里的好处是，我可以使用“私有 CurrentSession”，它会自动设置成员变量“CurrentSession”。

html 看起来像这样：

<button ng-click="main.logOut()">Log out {{main.CurrentSession.CURRENT_USER.Name}}</button>

【讨论】：