Angular：访问组件模板内的外部静态类答案

【问题标题】：Angular: Access an external static class inside of a components templateAngular：访问组件模板内的外部静态类
【发布时间】：2017-11-29 14:24:27
【问题描述】：

假设我有一个带有相应类的角度组件。

@Component({
  selector: "test",
  template: `       whatever    `
})

export class TestComponent
{}

然后我有一个带有静态成员的类（绑定到类而不是实例）。

export class Config
{
    public static foo () : string
    {  return "blabla"; }
}

有没有办法在我的组件模板中调用 Config.foo？

template: ` {{ Config.foo () }} `

如果我将它包装在 TestComponent 中并在我的组件中调用它，它就可以工作。

template: `{{ myfoo () }}`
...
export class TestComponent
{
  myfoo ()
  { return Config.foo (); }
}

但这不是我想要的。

Config 应该保存全局配置信息，我不想在很多组件中包装任何信息。

或者有什么更优雅的方式吗？我考虑过注入（单例），但对于无状态常量信息，我更喜欢静态方式。

谢谢！

【问题讨论】：

您可以使用“全局”服务（在主模块中提供）并通过它跨组件传递变量，也可以作为对它们的引用。所以，在构造函数中你应该注入服务，作为公共属性，然后在视图{{ myServiceInstance.myPropOrFnCall }}

【解决方案1】：

您无法在模板中调用Config.foo 方法是正常的。

在模板中，双括号 ({{}}) 内的表达式被“限定”到组件本身：this 隐含在表达式上。

在这种情况下我经常使用的是“getter”，像这样：

get configFoo(): string { return Config.foo(); }

在模板内部，它看起来像这样：

{{configFoo}}

【讨论】：

【解决方案2】：

在 html 模板中不能直接访问静态成员。这些成员仅用于创建单音对象并直接访问其他类。所以我们必须创建一个非静态方法来在 html 模板中返回它的值。模板以“this”为界，该类与该模板相关联。

【讨论】：