Как получить доступ к константе в компоненте 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

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

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

class MyComponent { 
    myConst = CONST; 
} 

{{myConst}} 

Answer 3

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

Answer 4

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

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

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

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

    readonly MY_CONSTANT = MY_CONSTANT; 

    // ... 
} 

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

Это, в шаблоне вы можете использовать:

{{ MY_CONSTANT }}