如何访问 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 -->

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

some.component.ts

public const constant = C0NST;

some.component.html

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

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

Answer 1

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

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

---

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

Answer 2

由于在组件的模板中只能使用组件类的属性，不能直接使用任何外部常量（或外部变量）。

到目前为止，我发现的最优雅的方法如下：

import { MY_CONSTANT } from '../constants';

@Component({
  // ...
})
export class MyTestComponent implements OnInit {

  readonly MY_CONSTANT = MY_CONSTANT;

  // ...
}

它基本上只是在组件类中创建了一个新属性MY_CONSTANT 。 使用readonly我们确保不能修改新属性。

这样做，您现在可以在模板中使用：

{{ MY_CONSTANT }}

Answer 3

Angular2 模板绑定的范围是组件实例。 只有在那里可以访问的内容才能用于绑定。

你可以让它像

class MyComponent {
  myConst = CONST;
}

{{myConst}}

Answer 4

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

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

枚举

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
在我看来，引入了很多语法噪音，可能会让新手感到困惑

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

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

枚举

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管道订阅结果。您可以参考我关于该内容的简短文章HERE

Answer 5

你可以创建一个 BaseComponent ，它是你应该创建常量实例的地方，然后你可以创建你的 FooComponent extends BaseComponent 并且你可以使用你的常量。