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

因为在Component的模板中你只能使用Component类的属性，所以你不能直接使用任何外部常量（或外部变量）。

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

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

我认为有两个最佳方向：

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

<强> enum.ts

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

<强> component.ts

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

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

component.html

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

此解决方案在内存使用情况上的效率较低，因为您基本上是在要使用它的每个组件中复制数据（或对常量的引用）。除此之外，语法
readonly constData: typeof constData = constData
在我看来，引入了很多语法噪音，可能会让新手们感到困惑

在组件功能中包装外部常量

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

<强> enum.ts

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

<强> component.ts

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

component.html

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

好消息是数据不会在控制器中重复，但会出现其他主要缺点。根据Angular团队的说法，由于更改检测机制，建议不要使用模板中的函数，如果函数将值返回到模板，则效率会降低：更改检测不知道函数的值返回是否已更改，因此它将经常被称为方式而不是需要（并且假设你从中返回const，在填充模板视图时实际上只需要一次。这可能只会对你的应用程序造成一定的效率损失（如果你运气好的话））或者如果函数解析为Observable，它可能完全将其分解，并且您使用async管道来订阅结果。您可以参考我关于HERE的简短文章

Answer 5

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

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

5 个答案:

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

在组件功能中包装外部常量