Jak przekazać wartość ciągu do komponentu w angular2

86

Chciałbym przekazać wartość ciągu do komponentu w angular2, ale nie działa z domyślnym powiązaniem. Myślę o czymś podobnym do tego: 

<component [inputField]="string"></component>

Niestety, po prawej stronie zadania dozwolone są tylko wyrażenia. Czy jest na to sposób?

angular angular2-template Andras Hatvani
źródło

Odpowiedzi:

174

Literały ciągów można przekazywać na różne sposoby:

<component inputField="string"></component>
<component [inputField]="'string'"></component>
<component inputField="{{'string'}}"></component>
Günter Zöchbauer
źródło
1
Czy jest między nimi jakaś różnica? Np. Czy Angular stworzyłby „wiązania” w ostatnich dwóch przypadkach, czy jest wystarczająco inteligentny?
Alexander Abakumov
Angular jest wystarczająco inteligentny. Tylko pierwszy będzie widoczny w DOM.
Günter Zöchbauer
1
Dzięki. Przechodziłem bez zagnieżdżonych cudzysłowów i <component [inputField]='string'></component>
zwracałem
Z technicznego punktu widzenia nie sugerowałbym opcji 1 i 3. To dosłownie obejmowałoby te atrybuty i wartości w elemencie komponentu, jak również wszelkie elementy w komponencie, które mogą wykorzystywać te wartości. Na przykład id="example-id"przekaże poprawny pożądany ciąg, jednak teraz będą 2 elementy z tym samym idatrybutem. Użyj tego podejścia mądrze ...
mrtpain
50

Możesz przekazać ciąg, umieszczając go w cudzysłowie

<component [inputField]="'string'"></component>
Eric Martinez
źródło
3

Aby dołączyć pojedynczy cudzysłów (i prawdopodobnie inne specjalne znaki HTML) do literału ciągu, pierwsza opcja działa, podczas gdy te, które używają pojedynczych cudzysłowów do zawijania literału, kończą się błędami analizy. Na przykład:

<component inputField="John&#39;s Value"></component>

Wyświetli poprawnie „John's Value”.

Glenn
źródło