如何访问 Angular 2 组件和服务中的常量？

Question

我有一个常量文件 constants.ts ：

 export const C0NST = "constant";

我在服务 some.service.ts 中访问它，如下所示：

 import { C0NST } from './constants';

console.log(C0NST); // "constant"

但是，当我在组件模板中访问它时：

some.component.ts ：

 import { C0NST } from './constants';

some.component.html ：

 {{ C0NST }} <!-- Outputs nothing -->

但是在组件类中定义一个成员是有效的：

一些.component.ts

 public const constant = C0NST;

some.component.html

 {{ constant }} <!-- constant -->

我不明白为什么我能够直接在服务类中访问导入的常量，而不是在组件模板中，即使我在组件类中导入了它。

原文由 Karma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在Angular2中，模板只能访问组件类的字段和方法。其他一切都是禁区。这包括对组件类可见的东西。

解决这个问题的方法是在组件内部有一个字段，它只引用常量，然后使用它。

---

这是设计的一个限制，但也许您应该更多地考虑一下为什么首先需要在模板中使用常量。通常这些东西是由组件本身或服务使用的，而不是模板。

原文由 Horia Coman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为最好的方向有两个：

将常量包装为内部组件属性

枚举.ts

 export enum stateEnum {
  'DOING' = 0,
  'DONE',
  'FAILED'
}

组件.ts

 import { stateEnum  } from './enum'
export class EnumUserClass {
  readonly stateEnum : typeof stateEnum = stateEnum ;
}

示例使用枚举，但这可以是任何类型的已定义常量。 typeof 运算符为您提供 TypeScript 打字功能的所有好处。然后，您可以直接在模板中使用此变量：

组件.html

 <p>{{stateEnum.DOING}}<p>

此解决方案在内存使用上下文中效率较低，因为您基本上是在您希望使用它的每个组件中复制数据（或对常量的引用）。除此之外，语法

readonly constData: typeof constData = constData

在我看来，引入了很多语法噪音，可能会让新手感到困惑

在组件函数中包装外部常量

第二种选择是用组件函数包装你的外部变量/常量，并在模板上使用该函数：

枚举.ts

 export enum stateEnum {
  'DOING' = 0,
  'DONE',
  'FAILED'
}

组件.ts

 import { stateEnum  } from './enum'
export class EnumUserClass {
  getEnumString(idx) {
    return stateEnum[stateEnum[idx]];
  }
}

组件.html

 <p>{{getEnumString(1)}}</p>

好消息是数据不会在控制器中重复，但会出现其他主要缺点。根据 Angular 团队的说法，由于更改检测机制，不建议在模板中使用函数，这在函数将值返回到模板的情况下效率较低：更改检测不知道函数返回的值是否已更改，所以它会被调用的频率比需要的多（假设你从它返回 const ，在填充模板视图时实际上只需要一次。它可能只是对你的应用程序的一点效率影响（如果你幸运的话）或例如，如果函数使用 Observable 解析，并且您使用 async 管道订阅结果，它可能会完全分解。您可以在 此处 参考我的简短文章

原文由 Tomas 发布，翻译遵循 CC BY-SA 4.0 许可协议