ตัวแปรเทมเพลตใน Angular

ใน Angular คุณสามารถเข้าถึงแท็กของหน้าเว็บได้โดยใช้ ตัวแปรเทมเพลต พวกมันช่วยให้คุณผูกแท็กกับตัวแปรและอ้างอิงถึงมันได้ในระหว่างการทำงานของคอมโพเนนต์ เพื่อประกาศตัวแปรดังกล่าว คุณต้องใส่เครื่องหมาย # หน้าชื่อของมัน

มาดูกันในทางปฏิบัติ สมมติว่าเรามี div เขียนมันลงในตัวแปรเทมเพลต:

app/app.component.html<div #userName>
  text
</div>

ตอนนี้ในตัวแปร userName จะมีการเก็บลิงก์ไปยังองค์ประกอบ DOM ของ div ของเรา และเราสามารถอ้างอิงถึงมันได้ ตามที่ทำใน JavaScript แบบ vanilla ตัวอย่างเช่น ลองแสดงข้อความของ div นี้ในแท็กอื่น:

app/app.component.html<div>
  {{ userName.textContent }}
</div>