<input type="text" [value]="value" #name>
1. La variable de referencia de la plantilla puede ser un elemento DOM, un componente angular (instrucción), un elemento, TemplateRef o incluso una referencia a un componente web en Angualr. plantilla , y es específica. Lo que es depende del elemento al que está adjunto (sin intervención mediante directivas) . Como en el código de muestra anterior, el name
de la variable de referencia de la plantilla es una referencia al elemento DOM <input>
. [Recomendación de tutorial relacionado: "tutorial angular"]
<app-component #component [input]="variable"></app-component> {{ componente.entrada }} {{ componente.func() }}
A través de la variable de referencia de la plantilla, obtenemos la referencia de instancia app-component
, lo que nos permite acceder fácilmente a los miembros dentro app-component
en la plantilla.
2. Angular asigna valores a las variables de plantilla según la ubicación de la variable que declara:
si declara una variable en un componente, la variable se referirá a la instancia del componente.
Si declara una variable en un formato HTML estándar, la variable se refiere a ese elemento.
Si declara una variable en el elemento <ng-template>
, la variable hará referencia a una instancia TemplateRef
para representar la plantilla.
Si la variable especifica un nombre a la derecha, como #var="ngModel"
, entonces la variable hará referencia a la directiva o componente con el nombre exportAs
en el elemento.
3. Uso de NgForm
con variables de plantilla <br/> La directiva NgForm
aquí demuestra cómo hacer referencia a diferentes valores haciendo referencia al nombre exportAs
de la directiva. En el siguiente ejemplo, la variable de plantilla itemForm
aparece tres veces en el HTML.
<formulario #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)"> <label for="nombre">Nombre</label> <tipo de entrada="texto" id="nombre" clase="control-formulario" nombre="nombre" ngModel requerido /> <botón tipo="enviar">Enviar</botón> </formulario> <div [oculto]="!itemForm.form.valid"> <p>{{ enviar mensaje }}</p> </div>
* Si no hay ningún valor de atributo ngForm, el valor al que hace referencia itemForm será el elemento <form>
. Com 和
Directive
之间的差异在于Angular 在没有指定属性值的情况下,Angular 会引用Component
,而Directive
不会改变这种隐式引用(即它的宿主元素)。(还没读懂什么意思.......
y después de usar NgForm
, itemForm
es una referencia a la directiva NgForm. Puede usarlo para rastrear el valor y la validez de cada control en el formulario.
Comparado con el <form>
nativo <form>
Diferentes elementos, la directiva NgForm
tiene un atributo form
. Si itemForm.form.valid
no es válido, entonces el atributo form
de NgForm
le permitirá desactivar el botón de enviar.
De hecho, cuando se usa angular para escribir páginas de lista, las variables de referencia de plantilla suelen ser. usado:
Haga referencia al método ejecutarQuery() de ngxQuery en el cuadro de entrada del componente de lista. Por supuesto, si queremos usar variables de referencia de plantilla en ts, debemos usar @ViewChild y @ViewChildren, que son los decoradores que nos proporciona Angular.
Obtenemos el componente ngxQuery a través del nombre de la variable de plantilla en ts:
En ts, puede llamar directamente al método ExecuteQuery() de ngxQuery y actualizar la lista cuando se pasan parámetros:
(El contenido relevante sobre el decorador ViewChild se puede encontrar aquí ******)
Para los componentes padre-hijo, las variables de referencia de plantilla también se pueden usar directamente:
buGroup es una matriz en bugroupSelectComponent, que se pasa como una variable de referencia de plantilla a través de componente padre-hijo.
Obtenga el valor del componente secundario en el componente principal ts y use: