Cómo pasar un valor de cadena a un componente en angular2

86

Me gustaría pasar un valor de cadena a un componente en angular2, pero no funciona con el enlace predeterminado. Estoy pensando en algo similar a esto: 

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

Desafortunadamente, solo se permiten expresiones en el lado derecho de la tarea. ¿Hay alguna forma de hacer esto?

angular angular2-template Andras Hatvani
fuente

Respuestas:

174

Los literales de cadena se pueden pasar de diferentes formas:

<component inputField="string"></component>
<component [inputField]="'string'"></component>
<component inputField="{{'string'}}"></component>
Günter Zöchbauer
fuente
1
¿Hay alguna diferencia entre esos? Por ejemplo, ¿Angular crearía "enlaces" en los dos últimos casos o es lo suficientemente inteligente?
Alexander Abakumov
Angular es lo suficientemente inteligente. Solo el primero será visible en el DOM.
Günter Zöchbauer
1
Gracias. <component [inputField]='string'></component>
Pasaba
Técnicamente, no sugeriría las opciones 1 y 3. Esto incluirá literalmente esos atributos y valores en el elemento del componente, así como cualquier elemento dentro del componente que pueda utilizar esos valores. En el ejemplo id="example-id"pasará la cadena correcta deseada, sin embargo, ahora habrá 2 elementos con el mismo idatributo. Utilice este enfoque sabiamente ...
mrtpain
50

Puede pasar una cadena encerrando la cadena entre comillas

<component [inputField]="'string'"></component>
Eric Martinez
fuente
3

Para incluir una comilla simple (y posiblemente otros caracteres HTML especiales) en el literal de cadena, la primera opción funciona, mientras que aquellas que usan comillas simples para ajustar el literal fallan con errores de análisis. Por ejemplo:

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

Producirá "Valor de John" correctamente.

Glenn
fuente