<input type="text" [value]="value" #name>
1. Die Vorlagenreferenzvariable kann ein DOM-Element, eine Angular-Komponente (Anweisung), ein Element, TemplateRef oder sogar eine Referenz auf eine Webkomponente in Angualr sein template , und es ist spezifisch. Was es ist, hängt von dem Element ab, an das es angehängt ist (ohne Eingriff mithilfe von Anweisungen) . Wie im vorherigen Beispielcode ist der name der Vorlagenreferenzvariable ein Verweis auf das DOM-Element <input> . [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]
<app-component #component [input]="variable"></app-component>
{{ Component.input }}
{{ Component.func() }} Über die Vorlagenreferenzvariable erhalten wir die Instanzreferenz app-component , die uns einen einfachen Zugriff auf die Mitglieder innerhalb app-component in der Vorlage ermöglicht.
2. Angular weist Vorlagenvariablen Werte basierend auf dem Speicherort der von Ihnen deklarierten Variablen zu:
Wenn Sie eine Variable für eine Komponente deklarieren, verweist die Variable auf die Komponenteninstanz.
Wenn Sie eine Variable in einem Standard-HTML-Markup deklarieren, verweist die Variable auf dieses Element.
Wenn Sie eine Variable für das <ng-template> -Element deklarieren, verweist die Variable auf eine TemplateRef Instanz, um die Vorlage darzustellen.
Wenn die Variable rechts einen Namen angibt, z. B. #var="ngModel" , verweist die Variable auf die Direktive oder Komponente mit dem exportAs -Namen im Element.
3. NgForm mit Vorlagenvariablen verwenden <br/> Die NgForm -Direktive hier zeigt, wie auf verschiedene Werte verwiesen wird, indem auf den exportAs Namen der Direktive verwiesen wird. Im folgenden Beispiel erscheint die Vorlagenvariable itemForm dreimal im HTML.
<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
<label for="name">Name</label>
<input type="text" id="name" class="form-control" name="name" ngModel erforderlich />
<button type="submit">Senden</button>
</form>
<div [hidden]="!itemForm.form.valid">
<p>{{ subscribeMessage }}</p>
</div> * Wenn kein ngForm-Attributwert vorhanden ist, ist der von itemForm referenzierte Wert das <form> -Element. Com 和Directive之间的差异在于Angular 在没有指定属性值的情况下，Angular 会引用Component ，而Directive不会改变这种隐式引用（即它的宿主元素)。(还没读懂什么意思.......
und nach der Verwendung NgForm ist itemForm ein Verweis auf die NgForm-Direktive. Sie können damit den Wert und die Gültigkeit jedes Steuerelements im Formular verfolgen.
Im Vergleich zum nativen <form> Verschiedene Elemente: NgForm Direktive verfügt über ein form . Wenn itemForm.form.valid form NgForm ungültig ist, können Sie die Schaltfläche „Senden“ deaktivieren.
Wenn Sie Angular zum Schreiben von Listenseiten verwenden, sind dies häufig der Fall gebraucht:
Verweisen Sie auf die MethodeexecuteQuery() von ngxQuery im Eingabefeld der Listenkomponente. Wenn wir in ts Vorlagenreferenzvariablen verwenden möchten, müssen wir natürlich @ViewChild und @ViewChildren verwenden, die uns von Angular zur Verfügung gestellten Dekoratoren sind.
Wir erhalten die ngxQuery-Komponente über den Namen der Vorlagenvariablen in ts:
In ts können Sie die ExecuteQuery()-Methode von ngxQuery direkt aufrufen und die Liste aktualisieren, wenn Parameter übergeben werden:
(Relevante Inhalte zum ViewChild-Dekorator finden Sie hier******)
Für Parent-Child-Komponenten können Template-Referenzvariablen auch direkt verwendet werden:
buGroup ist ein Array in bugroupSelectComponent, das als Template-Referenzvariable durch übergeben wird Eltern-Kind-Komponente kommt vorbei:
Holen Sie sich den Wert der untergeordneten Komponente in den ts der übergeordneten Komponente und verwenden Sie:
