Eine kurze Analyse der Vorlagenreferenzvariablen in Angular

Lernen Sie in diesem Artikel weiter Angular und informieren Sie sich über die Vorlagenreferenzvariablen in Angular. Ich hoffe, dass es für alle hilfreich ist!

<input type="text" [value]="value" #name>

1 Eine Vorlagenreferenzvariable kann ein DOM-Element, eine Angular-Komponente (Direktive), ein Element, eine TemplateRef oder sogar eine Referenz auf eine Webkomponente in einer Angualr-Vorlage sein es ist abhängige Elemente (wenn nicht mit Anweisungen interveniert) . Beispielsweise ist die Vorlagenreferenzvariable name im vorherigen Beispielcode eine Referenz auf das DOM-Element <input>. [Verwandte Tutorial-Empfehlung: „Angular Tutorialname就是<input>这一DOM元素的引用。【相关教程推荐：《angular教程》】

<app-component #component [input]="variable"></app-component>
{{ component.input }}
{{ component.func() }}

通过模板引用变量我们获得了app-component组件的实例引用，这使得我们可以轻松地在模板中访问app-component组件内部的成员。
2. Angular 根据你所声明的变量的位置给模板变量赋值：

• 如果在组件上声明变量，该变量就会引用该组件实例。

• 如果在标准的 HTML 标记上声明变量，该变量就会引用该元素。

• 如果你在 <ng-template> 元素上声明变量，该变量就会引用一个 TemplateRef 实例来代表此模板。

• 如果该变量在右侧指定了一个名字，比如 #var="ngModel" ，那么该变量就会引用所在元素上具有这个 exportAs 名字的指令或组件。

3. 将 NgForm 与模板变量一起使用
这里的 NgForm 指令演示了如何通过引用指令的的 exportAs 名字来引用不同的值。在下面的例子中，模板变量 itemForm 在 HTML 中分别出现了三次。

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
  <label for="name">Name</label>
  <input type="text" id="name" class="form-control" name="name" ngModel required />
  <button type="submit">Submit</button>
</form>
 
<div [hidden]="!itemForm.form.valid">
  <p>{{ submitMessage }}</p>
</div>

 * 如果没有 ngForm 这个属性值，itemForm 引用的值将是 <form> 元素。而 Com 和 <code>Directive 之间的差异在于 Angular 在没有指定属性值的情况下，Angular 会引用 Component，而 Directive 不会改变这种隐式引用（即它的宿主元素)。(还没读懂什么意思.......

而使用了 NgForm 之后，itemForm 就是对 NgForm 指令的引用，可以用它来跟踪表单中每一个控件的值和有效性。

与原生的 <form> 元素不同， NgForm 指令有一个 form 属性。如果 itemForm.form.valid 无效，那么 NgForm 的 form“]

rrreee

Über die Vorlagenreferenzvariable erhalten wir die

instanz

Referenz der app-component-Komponente, die uns einen einfachen Zugriff auf die Vorlage ermöglicht app-componentMitglieder innerhalb der Komponente.

2. Angular weist Vorlagenvariablen Werte basierend auf der Position 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 im Element <ng-template> deklarieren, verweist die Variable auf eine TemplateRef-Instanz, um diese Vorlage darzustellen.

• Wenn die Variable auf der rechten Seite einen Namen angibt, z. B. #var="ngModel", dann verweist die Variable auf die exportAs des Elements wo es sich befindet. Die Direktive oder Komponente des Namens.

3. Verwenden Sie NgForm mit Vorlagenvariablen

Die NgForm-Direktive hier zeigt, wie die exportAs -Namen, um auf verschiedene Werte zu verweisen. Im folgenden Beispiel erscheint die Vorlagenvariable <code>itemForm dreimal im HTML.

rrreee

*

Wenn kein ngForm-Attributwert vorhanden ist, ist der von itemForm referenzierte Wert das <form>-Element . Der Unterschied zwischen Com und <code>Directive besteht darin, dass Angular auf Component verweist, ohne einen Eigenschaftswert anzugeben, während Directive Dieser implizite Verweis (d. h. sein Host-Element) wird nicht geändert. (Ich verstehe immer noch nicht, was es bedeutet...

Nach der Verwendung von NgForm ist itemForm ein Verweis auf die NgForm-Direktive, die verwendet werden kann Es verfolgt den Wert und die Gültigkeit jedes Steuerelements im Formular.

Im Gegensatz zum nativen <form>-Element verfügt die NgForm-Direktive über ein Formularcode>-Attribut. Wenn <code>itemForm.form.valid ungültig ist, können Sie mit dem form-Attribut von NgForm die Schaltfläche „Senden“ deaktivieren
. Tatsächlich werden beim Schreiben einer Listenseite häufig Vorlagenreferenzvariablen verwendet:

Beziehen Sie sich natürlich auf die Methode „executeQuery()“ von ngxQuery im Eingabefeld der Listenkomponente Wir möchten Vorlagenreferenzen in ts verwenden. Für Variablen müssen wir @ViewChild und @ViewChildren verwenden, die von Angular bereitgestellten Dekoratoren. Wir erhalten die ngxQuery-Komponente über den Namen der Vorlagenvariablen in ts:

🎜🎜 kann die ExecuteQuery-Methode von ngxQuery direkt in der ts()-Methode aufrufen und die Liste aktualisieren, wenn Parameter übergeben werden: 🎜🎜🎜🎜🎜 (Verwandte Inhalte zum ViewChild-Dekorator können nach ****** verschoben werden)🎜🎜Für Eltern-Kind Komponenten, Vorlagenreferenzvariablen können auch direkt verwendet werden: 🎜🎜buGroup ist ein Array in bugroupSelectComponent. Übergeben Sie es als Vorlagenreferenzvariable über die übergeordnete und untergeordnete Komponente: 🎜🎜🎜🎜🎜🎜🎜 Rufen Sie den Wert der untergeordneten Komponente ab Elternkomponente ts und Verwendung: 🎜🎜🎜🎜🎜 Für weitere Programmierkenntnisse besuchen Sie bitte: 🎜Programmiervideo🎜!

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Vorlagenreferenzvariablen in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!