การวิเคราะห์โดยย่อของตัวแปรอ้างอิงเทมเพลตใน Angular

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

1. ตัวแปรอ้างอิงเทมเพลตสามารถเป็นองค์ประกอบ DOM, ส่วนประกอบเชิงมุม (คำสั่ง), องค์ประกอบ, TemplateRef หรือแม้แต่การอ้างอิงไปยังองค์ประกอบเว็บใน Angualr template และมีความเฉพาะเจาะจง มันขึ้นอยู่กับองค์ประกอบที่แนบมาด้วย (โดยไม่มีการแทรกแซงโดยใช้คำสั่ง) เช่นเดียวกับโค้ดตัวอย่างก่อนหน้านี้ name ตัวแปรอ้างอิงเทมเพลตคือการอ้างอิงไปยังองค์ประกอบ DOM <input> [คำแนะนำบทช่วยสอนที่เกี่ยวข้อง: "บทช่วยสอนเชิงมุม"]

<app-component #component [input]="variable"></app-component>
{{ ส่วนประกอบอินพุต }}
{{ Component.func() }}

เราได้รับการอ้างอิง อินสแตนซ์ ของ app-component ซึ่งช่วยให้เราเข้าถึงสมาชิกภายในส่วนประกอบ app-component ในเทมเพลตได้อย่างง่ายดายผ่านตัวแปรอ้างอิงเทมเพลต
2. Angular กำหนดค่าให้กับตัวแปรเทมเพลตตามตำแหน่งของตัวแปรที่คุณประกาศ:

• หากคุณประกาศตัวแปรบนส่วนประกอบ ตัวแปรจะอ้างอิงถึงอินสแตนซ์ของส่วนประกอบ

• หากคุณประกาศตัวแปรบนมาร์กอัป HTML มาตรฐาน ตัวแปรจะอ้างอิงถึงองค์ประกอบนั้น

• หากคุณประกาศตัวแปรในองค์ประกอบ <ng-template> ตัวแปรจะอ้างอิงอินสแตนซ์ TemplateRef เพื่อแสดงเทมเพลต

• หากตัวแปรระบุชื่อทางด้านขวา เช่น #var="ngModel" ตัวแปรจะอ้างอิงถึงคำสั่งหรือส่วนประกอบที่มีชื่อ exportAs บนองค์ประกอบ

3. การใช้ NgForm กับตัวแปรเทมเพลต <br/> คำสั่ง NgForm ที่นี่สาธิตวิธีการอ้างอิงค่าที่แตกต่างกันโดยการอ้างอิงชื่อ exportAs ของคำสั่ง ในตัวอย่างต่อไปนี้ ตัวแปรเทมเพลต itemForm ปรากฏสามครั้งใน HTML

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
  <label for="name">ชื่อ</label>
  <input type="text" id="name" class="form-control" name="name" ngModel จำเป็น />
  <button type="submit">ส่ง</button>
</แบบฟอร์ม>
 
<div [hidden]="!itemForm.form.valid">
  <p>{{ ส่งข้อความ }}</p>
</div>

* หากไม่มีค่าแอตทริบิวต์ ngForm ค่าที่อ้างอิงโดย itemForm จะเป็นองค์ประกอบ <form> Com 和Directive之间的差异在于Angular 在没有指定属性值的情况下，Angular 会引用Component ，而Directive不会改变这种隐式引用（即它的宿主元素)。(还没读懂什么意思.......

และหลังจากใช้ NgForm แล้ว itemForm จะเป็นการอ้างอิงถึงคำสั่ง NgForm คุณสามารถใช้มันเพื่อติดตามค่าและความถูกต้องของตัวควบคุมแต่ละรายการในแบบฟอร์ม

เปรียบเทียบกับ Native <form> องค์ประกอบที่แตกต่างกัน คำสั่ง NgForm มีแอตทริบิวต์ของ form หาก itemForm.form.valid ไม่ถูกต้อง ดังนั้นแอตทริบิวต์ form ของ NgForm จะให้คุณปิดการใช้งานปุ่มส่ง

ที่จริงแล้ว เมื่อใช้เชิงมุมเพื่อเขียนหน้ารายการ ตัวแปรอ้างอิงเทมเพลตมักจะเป็นเช่นนั้น ใช้แล้ว:

อ้างอิงเมธอดExecuteQuery()ของ ngxQuery ในกล่องอินพุตของส่วนประกอบรายการ แน่นอนว่าหากเราต้องการใช้ตัวแปรอ้างอิงเทมเพลตใน ts เราต้องใช้ @ViewChild และ @ViewChildren ซึ่งเป็นตัวตกแต่งที่ Angular มอบให้เรา

เราได้รับส่วนประกอบ ngxQuery ผ่านชื่อตัวแปรเทมเพลตใน ts:

ใน ts คุณสามารถเรียกใช้เมธอด ExecuteQuery() ของ ngxQuery ได้โดยตรง และรีเฟรชรายการเมื่อมีการส่งพารามิเตอร์:

(สามารถดูเนื้อหาที่เกี่ยวข้องเกี่ยวกับมัณฑนากร ViewChild ได้ที่นี่******)

สำหรับส่วนประกอบหลักและลูก สามารถใช้ตัวแปรอ้างอิงเทมเพลตได้โดยตรง:

buGroup คืออาร์เรย์ใน bugroupSelectComponent ซึ่งถูกส่งผ่านเป็นตัวแปรอ้างอิงเทมเพลตผ่านทาง องค์ประกอบหลักและลูกมา:

รับค่าขององค์ประกอบลูกในองค์ประกอบหลัก ts และใช้: