Jak uzyskać dostęp do stałej w komponencie i usłudze Angular 2?

Question

mam stałe złożyć constants.ts:

export const C0NST = "constant"; 

mam do niego dostęp w usłudze some.service.ts tak:

import { C0NST } from './constants'; 

console.log(C0NST); // "constant" 

Jednak, kiedy do niego dostęp w szablon komponentu:

some.component.ts:

import { C0NST } from './constants'; 

some.component.html:

{{ C0NST }} <!-- Outputs nothing --> 

jednak definicję pręta w klasie komponentu działa:

some.component.ts

public const constant = C0NST; 

some.component.html

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

Nie rozumiem dlaczego byłem w stanie uzyskać dostęp do importowane stały bezpośrednio w klasie usług, ale nie w szablonie składnika chociaż importowane go w klasie komponentu.

Answer 1

W Angular2, szablon może tylko pola i metody klasy komponentów dostępu. Wszystko inne jest poza zasięgiem. Obejmuje to rzeczy, które są widoczne dla klasy komponentów.

Sposób obejścia tego polega na umieszczeniu pola wewnątrz komponentu, które po prostu odwołuje się do stałej i używa go zamiast tego.

---

To jedno ograniczenie projektu, ale być może powinieneś wiedzieć więcej o tym, dlaczego potrzebujesz stałej w szablonie. Zwykle te elementy są używane przez same komponenty lub usługi, ale nie szablon.

Answer 2

Zakres powiązań szablonów Angular2 jest instancją składnika. Tylko to, co jest dostępne, może być użyte w wiązaniach.

Można udostępnić go jak

class MyComponent { 
    myConst = CONST; 
} 

{{myConst}} 

Answer 3

Możesz utworzyć BaseComponent tam, gdzie powinieneś stworzyć swoje stałe instancje, a następnie możesz stworzyć swój FooComponent, który rozszerza BaseComponent i możesz używać swoich stałych.

Answer 4

Ponieważ w szablonie Komponentu można używać tylko atrybutów klasy Komponent, nie można bezpośrednio używać żadnych stałych zewnętrznych (lub zmiennych zewnętrznych).

najbardziej elegancki sposób, że znalazłem tak daleko jest następujące:

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

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

    readonly MY_CONSTANT = MY_CONSTANT; 

    // ... 
} 

który w zasadzie tylko tworzy nowy atrybut MY_CONSTANT wewnątrz klasy komponentów. Korzystając z readonly, upewniamy się, że nowego atrybutu nie można zmodyfikować.

przeciwnym razie, w szablonie można teraz używać:

{{ MY_CONSTANT }}