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

我有一个常量文件constants.ts：如何访问Angular 2组件和服务中的常量？

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 -->

我不明白为什么我能够直接访问导入恒在服务类，但没有分量模板即使我进口它的组件类。

来源

2016-10-25 Kabir Roy

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

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

这是设计的一个限制，但也许你应该更关心为什么你需要一个模板中的常量。通常这些东西被组件本身或服务使用，但不是模板。

来源

2016-10-25 10:33:21

谢谢Horia。我有一个GIF网址列表，我需要从Giphy发送，因此我将这些网址保存在常量文件中。我打算在整个应用程序中使用这些组件。根据你的说法，更好的方法是什么？ –

@KabirRoy这听起来像是一件体面的事情。如果您的图片数量相对较少，则可以为它们创建组件，并直接在源代码中使用giphy网址（就像您为应用程序提供的资源一样）。但无论如何，这听起来都是一个好方法。 –

Angular2模板绑定的范围是组件实例。只有那些可以在绑定中使用的内容。

你可以把它像提供

class MyComponent { 
    myConst = CONST; 
}

{{myConst}}

来源

2016-10-25 10:30:16

感谢的人，这就是我现在如何访问它。 :) –

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

来源

2017-03-20 12:03:56 sercanD

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

，我已经发现迄今最优雅的方式如下：

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

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

    readonly MY_CONSTANT = MY_CONSTANT; 

    // ... 
}

这基本上只是创建组件类中的新属性MY_CONSTANT。使用readonly我们确保新属性不能被修改。

这样做，在你的模板，你现在可以使用：

{{ MY_CONSTANT }}

来源

2017-12-05 12:10:50 ShinDarth

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

回答

相关问题