dostępu Angular2 zmienne globalne z szablonu HTML

Question

Mam zmienną globalną do przechowywania listę krajów tak:

export var COUNTRY_CODES = ["AD", "AE", "AF" /* and more */]; 

w jednym z moich komponentu, ja importowane zmienną używając normalnego instrukcji import

import { COUNTRY_CODES } from "../constants"; 

jestem w stanie uzyskać dostęp do tej zmiennej globalnej swobodnie w moim kodu komponentu, ale nie udało się osiągnąć coś podobnego do szablonu HTML:

<option *ngFor="let countryCode of COUNTRY_CODES" [value]="countryCode">{{countryCode | countryName}}</option> 

Mogę po prostu przekazać zmienną globalną do komponentu, definiując zmienną lokalną i przypisując do niej zmienną globalną podczas inicjalizacji.

ngOnInit() { 
    this.countryCodes = COUNTRY_CODES; 
} 

i zmienić ngFor do pętli na tej zmiennej lokalnej, aby to działa.

Moje pytanie: czy to jest właściwy sposób? Nie jestem całkowicie zadowolony z definiowania zmiennych pomostowych za każdym razem, gdy chcę używać zmiennych globalnych w moim szablonie.

Answer 1

Tworzysz zmienną countryCodes w sobie komponent, ale widok jest dostęp COUNTRY_CODES zamiast *

---

globalne identyfikatory jak Array, window, document, klasa i enum nazwy i zmienne globalne mogą nie być dostępne bezpośrednio z poziomu szablonu.

Zakres szablonu to instancja klasy komponentu.

Co można zrobić, jeśli potrzebujesz dostępu do żadnego z nich jest stworzenie getter w składniku jak

import { COUNTRY_CODES } from "../constants"; 

@Component(...) 
export class MyComponent { 
    get countryCodes() { return COUNTRY_CODES; } 
    // or countryCodes = COUNTRY_CODES; 
} 

to może być wykorzystane w szablonie jak

<option *ngFor="let countryCode of countryCodes" [value]="countryCode">{{countryCode | countryName}}</option> 

Używanie usługa wspólna, tak jak zasugerowano w innych odpowiedziach, działa podobnie. Jakie jest lepsze podejście, zależy od konkretnego zastosowania. Usługi są łatwe do udawania dla testów jednostkowych w przeciwieństwie do zmiennych globalnych.

Zobacz także

• Select based on enum in Angular2
• How to bind a list in Angular2?

Answer 2

Najpierw #

należy pamiętać, że nie jest to problem w swoim COUNTRY_CODES. na początku umieściłeś dwa podwójne cudzysłowy.

Powinno być,

Export var COUNTRY_CODES=["AD","AE","AF"]; 

drugie #

Kiedy przechodzą wartość const do this.countryCode, należy użyć go w ngfor pętli podobnego

*ngFor = "let cc in countryCode" [value]="cc" 

LUB

Jeśli chcesz używać go bezpośrednio w HTML, sugeruję utworzenie sharedService do definiowania zmiennej globalnej.

UPDATE

Inny sposób to można użyć provide function and define your constant there in provide function w bootstrap function następnie wstrzyknąć go do odpowiedniego elementu, aby go używać.

Wyjazd ten sposób tutaj

Working Example

Answer 3

zmiana to jako

export var COUNTRY_CODES = ["AD", "AE", "AF"]; 

kod mają dodatkową " w swojej tablicy, więc trzeba usunąć to pierwsze niż uruchomienie kodu tak gładko, jak:

working plunker

Answer 4

Chciałem todo coś podobnego, ale z wielu pojedynczych stałych.

Definiowanie gettera dla każdego z nich było naprawdę denerwujące - podobnie jak metoda tworzenia usługi dla tych stałych, ponieważ oznaczało to, że mogłem ich używać tylko tam, gdzie mogę je wprowadzić (lub ponownie wykonać dodatkową pracę).

Znalazłem, że za pomocą wbudowanych szablonów, naprawiono je dla mnie - ponieważ pozwala to na kompilację stałych do szablonu - używając składni maszynowej multiline `$ {variable}` składnia szablonu - jedyną rzeczą, na którą należy zwrócić uwagę, jest to, że wartości muszą być opakowane zgodnie z ich typem. Ponieważ metoda array.toString() przyniosłaby wynik "1,2,3,4", więc musisz go zawinąć w "[]"/"ciąg", aby silnik o układzie kątowym wziął go za tablicę/ciąg znaków jeszcze raz.

Edycja: Właśnie widziałem, że wspomniano o podobnej metodzie, ale nie chcę również wstrzykiwać każdej pojedynczej wartości do przetwornika, ponieważ byłoby to równie niewygodne, jak definiowanie elementu na wartość.

stałych.TS:

export const TEST_STRING = 'route'; 
export const TEST_ARRAY = [1, 2, 3, 4]; 

component.ts:

import { 
    TEST_STRING, 
    TEST_ARRAY 
} from 'constants.ts' 
@Component({ 
    selector: 'hn-header', 
    template: ' 
     <a [routerLink]="['${TEST_STRING}']">Link</a> 
     <div *ngFor="let test of [${TEST_ARRAY}];">{{test}}</div> 
    ' 
    styleUrls: ['./header.component.css'] 
}) 
export class HeaderComponent {...} 

Skutkuje:

<a href="route">Link</a> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div>