Como passar um valor de string para um componente no angular2

86

Gostaria de passar um valor de string para um componente no angular2, mas não funciona com a ligação padrão. Estou pensando em algo semelhante a isto:

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

Infelizmente, apenas expressões são permitidas no lado direito da atribuição. Existe uma maneira de fazer isso?

angular angular2-template

— Andras Hatvani
fonte

174

Literais de string podem ser passados de maneiras diferentes:

<component inputField="string"></component>
<component [inputField]="'string'"></component>
<component inputField="{{'string'}}"></component>

— Günter Zöchbauer
fonte

1

Existe alguma diferença entre eles? Por exemplo, o Angular criaria "ligações" nos últimos dois casos ou é inteligente o suficiente?

— Alexander Abakumov

Angular é inteligente o suficiente. Apenas o primeiro ficará visível no DOM.

— Günter Zöchbauer

1

Obrigado. Eu estava passando sem aspas aninhadas e estava retornando o valor como NaN: <component [inputField]='string'></component>

— Eric Soyke

Tecnicamente, eu não sugeriria as opções 1 e 3. Isso incluirá literalmente esses atributos e valores no elemento do componente, bem como quaisquer elementos dentro do componente que possam utilizar esses valores. No exemplo id="example-id"vai passar a string correta desejada, porém, agora haverá 2 elementos com o mesmo idatributo. Use esta abordagem com sabedoria ...

— mrtpain

50

Você pode passar uma string colocando-a entre aspas

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

— Eric Martinez
fonte

3

Para incluir aspas simples (e possivelmente outros caracteres HTML especiais) no literal de string, a primeira opção funciona, enquanto aqueles que usam aspas simples para envolver o literal falham com erros de análise. Por exemplo:

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

Irá exibir "Valor de John" corretamente.

— Glenn
fonte