Me di cuenta de que es posible vincular cosas de propiedad sin corchetes. ¿Cuál es la diferencia?
Mecanografiado:
import { Component, Input } from '@angular/core'; @Component( { selector: 'my-comp', templateUrl: ` input is {{foo}} ` }) export class myComponent { @Input() public foo: string; constructor() { } }HTML:
Caso 1
<my-comp [foo]="bar"></my-comp>Caso 2
<my-comp foo="bar"></my-comp>En general, podemos decir que debemos usar enlaces sin corchetes solo cuando tenemos una propiedad de cadena fija:
De los documentos :
Debe omitir los corchetes cuando todo lo siguiente sea cierto:
- La propiedad de destino acepta un valor de cadena.
- La cadena es un valor fijo que puede hornear en la plantilla.
- Este valor inicial nunca cambia.
Rutinariamente inicializa los atributos de esta manera en HTML estándar, y funciona igual de bien para la inicialización de propiedades de componentes y directivas.
Al establecer una propiedad de elemento en un valor de datos que no sea una cadena, debe usar el enlace de propiedad.
En general, eso significa que el valor de la derecha solo se interpreta cuando se usan corchetes. Puede eliminar los corchetes cada vez que vea comillas entre comillas a la derecha: [anyStringProperty]="'hello'" se puede cambiar a anyStringProperty = "hello" .
Por lo tanto, el enlace de propiedad sin corchetes es posible siempre que también omitamos las comillas simples entre las comillas dobles al pasar una cadena.
Hay algunos casos en los que necesitamos agregar atributos html como estos dinámicamente y un ejemplo que proviene de json de la solicitud api
Caso 1 [] conocido como enlace de propiedad
<my-comp [foo]="data.bar"></my-comp> Caso 2 {{ }} conocido como Interpolación
<my-comp foo="{{data.bar}}"></my-comp>Caso 3 Manejo condicional
<my-comp [attr.foo]="data.bar ? true : false"></my-comp>Ambos {{ }} llamados como Interpolación y [] llamados como Vinculación de propiedades significan que angular entiende que hay un solo sentido desde la fuente de datos hasta el objetivo de la vista.
Para obtener más información, visite www.codementor.io
Aquí hay una breve descripción de todas las situaciones:
Cuando usa corchetes, el lado derecho es una expresión. Cuando no usa corchetes, el lado derecho es una constante.
Entonces asignará una cadena 'constante' a la entrada de my-tag. Para lograr el mismo efecto con corchetes: observe la comilla simple dentro. Si no puso una comilla simple allí, la entrada de my-tag se vinculará a la propiedad o variable de plantilla de su componente principal (donde escribe esta plantilla) (como let-constant de ngFor, por ejemplo) llamada "constante".
formulario aquí ¿Cuál es la diferencia entre el enlace de propiedad y solo un atributo regular?