1. Descripción
La plantilla Angular2 se usa para mostrar la aparición de componentes. Su uso es básicamente el mismo que la sintaxis HTML. La plantilla Angular2 más simple es una pieza de código HTML. La sintaxis de la plantilla angular incluye principalmente las siguientes partes:
L Atinción directa
L Expresión de interpolación
L Atención de atributos de L
L BILLACIÓN DE EVENTOS
L Atinñamiento de dos vías
L de estilo L de estilo
L plantillas y *
l Variables locales
Primero, echemos un vistazo a un ejemplo de una plantilla, como se muestra a continuación:
import {componente, onInit} de '@@angular/core';@componente ({selector: 'ui-demo', plantlate: `<form role =" form "> <div> <legend> title </legend> </div> <span> Atention: {{msg}}} </span> <div> <div> name </div> <put type =" text "name" name "name" name "name" [attr.size] = "size" [placeHolder] = "name"> </div> <div> <div> age </div> <input type = "text" (cambie) = "cambio ()" id = "edad" name = "age" [placeholder] = "edad"> </div> <div> sexy <1/div> <put type = "text" [(ngModel]] [PlaceHolder] = "Sex"> </div> <div *ng-if = "Needpwd"> <div> pwd </div> <input #InpWd type = "contraseña" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> <button type = "botón" "botón" (hacer clic) = "show (inpwd.value)"> warn </boton> </div> <div> <div [style.color] = "color"> <button type = "enviar" [class.btn-imprimary] = "isPrimary"> enviar </button> </div> </div> </orm> `` `}) Exportar clases de exportación TemprateMocomponent "Precauciones"; nombre: String = "Name"; Size: Number = 4; Age: Number = 15; Sex: String = 'Male'; Needpwd: boolean = true; pwd: string = ''; color: string = "rojo"; isPrimary: boolean = true; constructor () {} nGoninit () {} cambio () {} show ($ event) {console.log ($ evento);}}1.1 vinculación directa
Ate la cadena directamente al atributo correspondiente, por ejemplo, vincule el formulario de cadena al atributo de título
<Legend> Título </legend>
1.2 Expresión de interpolación
La expresión de interpolación se expresa en forma de {{}}, y los valores de la expresión correspondiente en el componente están unidos a la plantilla para la visualización. Por ejemplo, los valores de la expresión de MSG se muestran en el componente de la siguiente manera.
<span> atención: {{msg}} </span>1.3 Atención de atributos
La unión del atributo se expresa en forma de [], vinculando el valor de la expresión al atributo correspondiente, por ejemplo, vinculando el valor de expresión de nombre en el componente al marcador de posición de la propiedad
<div> <div> name </div> <input type = "text" id = "name" name = "name" [PlaceHolder] = "name"> </div>
Cuando hay un atributo correspondiente en el elemento unido al atributo, [xx] se puede usar para unirse directamente. Sin embargo, cuando no hay un atributo correspondiente en el elemento, [attr.xxx] debe usarse para agregar un punto para unir la información del atributo correspondiente.
<div> <div> name </div> <input type = "text" id = "name" name = "name" [attr.size] = "size" [positor] = "name"> </div>
1.4 Bintería de estilo
La encuadernación de estilo incluye principalmente dos estilo de estilo conveniente, en línea y vinculación de clases de estilo externo.
1.4.1 Bintería de estilo
El enlace de estilo es sintácticamente similar a la unión de propiedades. Sin embargo, la parte en los soportes cuadrados no es el nombre del atributo de un elemento, sino que incluye un prefijo de estilo seguido de un punto (.), Y luego el nombre del atributo del estilo CSS. Indica que la propiedad se usa en el elemento especificado, como se muestra en: [style.style-perporty]. Por ejemplo
<Div> <div [style.color] = "color"> <botón type = "enviar" [class.btnprimary] = "isPrimary"> enviar </botón> </div> </div>
1.4.2 Bintería de clase
La unión de la clase CSS es sintácticamente similar a la unión de propiedades. Sin embargo, la parte en los soportes cuadrados no es el nombre del atributo de un elemento, sino que incluye un prefijo de clase seguido de un punto (.), Y luego compuesto por el nombre de la clase CSS, como se muestra en: [class.class-name]. Indica si usar la clase CSS en este elemento o eliminar la clase CSS. Si el siguiente valor es verdadero, se utilizará la tabla. Falso significa eliminarlo.
<Div> <div [style.color] = "color"> <botón type = "enviar" [class.btnprimary] = "isPrimary"> enviar </botón> </div> </div>
1.5 * con <template>
Primero, echemos un vistazo a un ejemplo de * y <template>.
<div *ng-if = "Needpwd"> <iv> pwd </div> <input type = "contraseña" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> </div>
* Es un azúcar de sintaxis que facilita las instrucciones de leer y escribir que requieren plantillas para modificar los diseños HTML. Ngfor, ngif y ngswitch agregan o eliminan los subreos de elementos que están envueltos en la etiqueta <template>. Use la * sintaxis de prefijo para ignorar la etiqueta <template>, el código restaurado es el siguiente
<Template [ngif] = "Needpwd"> <div> <iv> pwd </div> <input type = "contraseña" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> </div> </tempate>
1.6 Variables locales
Las variables locales se representan en forma de #XXX. Si usa esta expresión en un elemento, se puede usar xxx para representar el elemento. Las variables locales se pueden usar en el mismo elemento, elemento hermano o cualquier elemento infantil. Como se muestra a continuación, puede usar esta variable para representar el elemento en un nodo hermano
<div *ng-if = "Needpwd"> <iv> pwd </div> <input #Inpwd type = "contraseña" [(ngmodel)] = "pwd" id = "pwd" name = "pwd"> <button type = "botón" (click) = "show (inpwd.value)"> Warn </botin> </div>
1.7 Enlace de eventos
La unión de atributos se expresa en forma de () y une el método del componente al evento correspondiente. Por ejemplo, une la función de cambio al evento de cambio, y la función de cambio se activará cuando ocurra el evento de cambio.
<Div> <Viv> Age </div> <input type = "text" (Change) = "Change ()" id = "Age" Name = "Age" [Posición de poseer] = "edad"> </div>
1.8 vinculación bidireccional
La unión bidireccional usa el método [()] para representar que la unión de dos vías es una combinación de enlace de atributos y vinculación de eventos. La unión de dos vías más utilizada es usar [(ngmodel)] = "xxx" en el formulario. Al modificar los datos en el formulario, se modificarán los elementos de datos vinculados. Como se muestra a continuación: cuando el formulario se ingresa para modificar, la variable de sexo también se modificará sincrónicamente
<Div> <Viv> sexo </div> <input type = "text" [(ngmodel)] = "sex" id = "sex" name = "sex" [poseedor] = "sexo"> </div>
Lo anterior es el conocimiento relevante de la gramática de la plantilla Angular2 que le presenta el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje. El editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin Network!