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

Respostas:

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