<input type="text" [value]="value" #name>
1. Variabel referensi template dapat berupa elemen DOM, komponen Angular (instruksi), elemen, TemplateRef, atau bahkan referensi ke komponen Web di Angualr template , dan spesifiknya tergantung pada elemen yang dilampirkannya (tanpa intervensi menggunakan arahan) . Seperti pada kode contoh sebelumnya, name variabel referensi template adalah referensi ke elemen DOM <input> . [Rekomendasi tutorial terkait: "tutorial sudut"]
<app-component #component [input]="variable"></app-component>
{{ komponen.input }}
{{ Component.func() }} Melalui variabel referensi template, kita memperoleh referensi instance dari komponen app-component , yang memungkinkan kita mengakses dengan mudah anggota di dalam komponen app-component di template.
2. Angular memberikan nilai ke variabel templat berdasarkan lokasi variabel yang Anda deklarasikan:
jika Anda mendeklarasikan variabel pada suatu komponen, variabel tersebut akan merujuk ke instance komponen.
Jika Anda mendeklarasikan variabel pada markup HTML standar, variabel tersebut merujuk ke elemen tersebut.
Jika Anda mendeklarasikan variabel pada elemen <ng-template> , variabel tersebut akan mereferensikan instance TemplateRef untuk mewakili template.
Jika variabel menentukan nama di sebelah kanan, seperti #var="ngModel" , maka variabel tersebut akan merujuk ke direktif atau komponen dengan nama exportAs pada elemennya.
3. Menggunakan NgForm dengan variabel templat <br/> Direktif NgForm di sini menunjukkan cara mereferensikan nilai yang berbeda dengan mereferensikan nama direktif exportAs . Dalam contoh berikut, variabel template itemForm muncul tiga kali dalam HTML.
<formulir #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
<label for="nama">Nama</label>
<input type="text" id="name" class="form-control" name="name" ngModel diperlukan />
<button type="submit">Kirim</button>
</bentuk>
<div [tersembunyi]="!itemForm.form.valid">
<p>{{ kirimkanPesan }}</p>
</div> * Jika tidak ada nilai atribut ngForm, nilai yang direferensikan oleh itemForm akan menjadi elemen <form> . Com 和Directive之间的差异在于Angular 在没有指定属性值的情况下，Angular 会引用Component ，而Directive不会改变这种隐式引用（即它的宿主元素)。(还没读懂什么意思.......
dan setelah menggunakan NgForm , itemForm adalah referensi ke direktif NgForm. Anda dapat menggunakannya untuk melacak nilai dan validitas setiap kontrol dalam formulir.
Dibandingkan dengan <form> asli <form> Elemen berbeda, direktif NgForm memiliki atribut form . Jika itemForm.form.valid tidak valid, maka atribut form NgForm akan memungkinkan Anda menonaktifkan tombol kirim.
Faktanya, saat menggunakan sudut untuk menulis halaman daftar, variabel referensi template sering kali digunakan:
Referensikan metode mengeksekusiQuery() dari ngxQuery di kotak input komponen daftar. Tentu saja, jika kita ingin menggunakan variabel referensi template di ts, kita harus menggunakan @ViewChild dan @ViewChildren, yang merupakan dekorator yang disediakan oleh Angular.
Kami memperoleh komponen ngxQuery melalui nama variabel template di ts:
Di ts, Anda bisa langsung memanggil metode ExecuteQuery() dari ngxQuery dan menyegarkan daftar ketika parameter diteruskan:
(Konten yang relevan tentang dekorator ViewChild dapat ditemukan di sini******)
Untuk komponen induk-anak, variabel referensi templat juga dapat digunakan secara langsung:
buGroup adalah array di buggroupSelectComponent, yang diteruskan sebagai variabel referensi templat melalui komponen orang tua-anak.
Dapatkan nilai komponen anak di komponen induk ts dan gunakan:
