Как получить доступ к константе в компоненте и службе Angular 2?

У меня есть файл констант 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 -->

Я не понимаю, почему мне удалось получить доступ к импортированной константе непосредственно в классе службы, но не в шаблоне компонента, даже если я импортировал его в класс компонента.

Ответ 1

В Angular2 шаблон может обращаться только к полям и методам класса компонента. Все остальное - вне пределов. Сюда относятся вещи, которые видны классу компонентов.

Как обойти это, нужно иметь поле внутри компонента, которое просто ссылается на константу и использует это вместо этого.

Это одно ограничение дизайна, но, возможно, вам стоит больше подумать о том, зачем вам нужна константа в шаблоне. Обычно эти вещи используются самими компонентами или услугами, но не шаблоном.

Ответ 2

Объем привязок шаблона Angular2 является экземпляром компонента. Только то, что доступно там, может быть использовано в привязках.

Вы можете сделать его доступным, например

class MyComponent {
  myConst = CONST;
}

{{myConst}}

Ответ 3

Поскольку в шаблоне Component вы можете использовать только атрибуты класса Component, вы не можете напрямую использовать какие-либо внешние константы (или внешние переменные).

Самый элегантный способ, который я нашел до сих пор, заключается в следующем:

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

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

  readonly MY_CONSTANT = MY_CONSTANT;

  // ...
}

который в основном просто создает новый атрибут MY_CONSTANT внутри класса компонента. Используя readonly, мы не можем изменить новый атрибут.

Сделав это, в своем шаблоне вы теперь можете использовать:

{{ MY_CONSTANT }}

Ответ 4

Вы можете создать BaseComponent, где вы должны создать свои постоянные экземпляры, а затем вы можете создать свой FooComponent, который расширяет BaseComponent, и вы можете использовать свои константы.