La vinculación de la propiedad en angular

Las siguientes son algunas de las cosas que hay que evitar al usar la vinculación de propiedad.

1. Cuando vinculamos un método o función a la vinculación de propiedades, ese método puede cambiar un valor en el componente. El ángulo puede o no mostrar el valor cambiado. Puede detectar el cambio, pero lanzará un error de advertencia.

• Al utilizar la vinculación de propiedades, asegúrese de que los valores mostrados coincidan.

1. El valor dentro de la expresión de la plantilla debe evaluarse según el tipo de valor esperado por la propiedad objetivo. Digamos que la propiedad objetivo espera un número, entonces el número debe ser devuelto. Si la propiedad objetivo espera una cadena, entonces la cadena debe ser devuelta. Si la propiedad de destino espera un objeto, entonces el objeto debe ser devuelto.

Consideremos un ejemplo de ExampleComponent. Aquí la propiedad person person del componente AppExample espera que un objeto de tipo person necesite estar ligado a él.

Nombre del archivo: person.ts

1234exportclassPerson{ nombre:cadena; dirección:cadena;}

tipografía

Nombre del archivo: app.component.ts

1234567891011121314importación{Componente}de"@angular/núcleo";importación{Persona}de$0027../persona$0027;@Componente({ selector:$0027app-root$0027, plantilla:` <div> <app-ejemplo [persona]="personName"</app-example; </div> `})clase de exportaciónAppComponente{ personName:Person;}

typeScript

1. No olvides poner corchetes alrededor de la propiedad durante la unión de la propiedad. Los paréntesis le dirán a Angular que evalúe la expresión de la plantilla. Si olvida usar los paréntesis, entonces Angular tratará la cadena como una constante e inicializará la propiedad objetivo con esa cadena. No evaluará la cadena.

Consideremos un ejemplo: Si no usamos corchetes durante la vinculación de la propiedad, entonces obtendremos un error «la persona espera un objeto Person, no la cadena personName».

1<app-exampleperson="personName"³;</app-example>

html

Puede omitir los corchetes cuando todas de las siguientes condiciones se cumplan:

• La propiedad del objetivo acepta un valor de cadena.
• La cadena es un valor fijo.
• El valor inicial nunca cambia.

Consideremos un ejemplo, en el que estamos inicializando la propiedad de valor del ExampleComponent a una cadena «Hello World!», no a una expresión de plantilla. Angular establece este valor fijo de la cadena sólo una vez y se olvida de él.

1<app-examplevalue="¡Hola Mundo!";

html

1. Siempre que estamos vinculando la propiedad de un elemento a un valor sin cuerda, entonces debemos usar la propiedad vinculante. De lo contrario, Angular no será capaz de identificar el tipo de valor de datos que estamos tratando de unir al DOM.
2. El ángulo no permitirá que las etiquetas del guión se coloquen en el HTML. Puede conducir a las fugas en el HTML y puede causar un problema de seguridad. Tanto la vinculación de propiedad como la interpolación no están permitidas dentro del HTML.

Consideremos un ejemplo, en el que somos un valor vinculante desde el componente hasta la vista que contiene la etiqueta del guión como se muestra a continuación.

Nombre del archivo: example.component.ts

12345678910111213importación{Componente}de"@angular/núcleo";@Componente({ selector:$0027app-example$0027, template:` <div> <<span [innerHTML]="scriptText"</span> </div> `})exportclassExampleComponent{ scriptText =$0027Template <script>alert("¡Texto con etiqueta de script! ");/script ]Sintaxis$0027;}

typeScript

Angular saneará los valores antes de renderizarlos a la vista. En el caso anterior, Angular lanzará una advertencia «desinfectando HTML despojado de contenido».