เทมเพลตในเชิงมุม

ใน Angular เทมเพลตคือพิมพ์เขียวสำหรับส่วนของส่วนต่อประสานผู้ใช้ (UI) เทมเพลตเขียนด้วย HTML และสามารถใช้ไวยากรณ์พิเศษภายในเทมเพลตเพื่อสร้างฟีเจอร์ต่างๆ ของ Angular ได้

Angular ขยายไวยากรณ์ HTML ในเทมเพลตของคุณด้วยฟังก์ชันเพิ่มเติม
ตัวอย่างเช่น ไวยากรณ์การเชื่อมโยงข้อมูลของ Angular ช่วยในการตั้งค่าคุณสมบัติ Document Object Model (DOM) แบบไดนามิก

ไวยากรณ์ HTML เกือบทั้งหมดเป็นไวยากรณ์เทมเพลตที่ถูกต้อง อย่างไรก็ตาม เนื่องจากเทมเพลตเชิงมุมเป็นเพียงส่วนย่อยของ UI จึงไม่รวมองค์ประกอบต่างๆ เช่น <html>, <body> หรือ <base>

หมายเหตุ:-เพื่อลดความเสี่ยงของการโจมตีด้วยการแทรกสคริปต์ Angular ไม่รองรับองค์ประกอบ <script> ในเทมเพลต Angular ละเว้นแท็ก <script> และส่งคำเตือนไปยังคอนโซลเบราว์เซอร์ สำหรับข้อมูลเพิ่มเติม โปรดดูที่หน้าความปลอดภัย

การแสดงค่าด้วยการแก้ไข

การแก้ไขหมายถึงการฝังนิพจน์ลงในข้อความที่มาร์กอัป ตามค่าเริ่มต้น การแก้ไขจะใช้วงเล็บปีกกาคู่ {{ และ }} เป็นตัวคั่น

ตัวอย่าง:

app.component.ts

message = "Here is the initialize message";

<p> {{message}} </p>

ตัวอย่าง:-

<p>{{title}}</p>
<div><img alt="item" src="{{itemImageUrl}}"></div>

app.component.ts

message = "Here is the initialize message";
getMessage():string{
  return this.message;
}

<p>{{getMessage()}}</p>

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

ตัวอย่าง:-

(click) = "updateMessage()"
<button (click) = "updateMessage()">Update Message</button>

เช่นเดียวกับนิพจน์เทมเพลต คำสั่งเทมเพลตใช้ภาษาที่ดูเหมือน JavaScript อย่างไรก็ตาม ตัวแยกวิเคราะห์สำหรับคำสั่งเทมเพลตแตกต่างจากตัวแยกวิเคราะห์สำหรับนิพจน์เทมเพลต นอกจากนี้ ตัวแยกวิเคราะห์คำสั่งเทมเพลตยังรองรับทั้งการกำหนดพื้นฐาน (=) และนิพจน์การโยงด้วยเครื่องหมายอัฒภาค (;)

ไม่อนุญาตไวยากรณ์นิพจน์ JavaScript และเทมเพลตต่อไปนี้:

1. ใหม่
2. ตัวดำเนินการเพิ่มและลด, ++ และ —
3. การกำหนดตัวดำเนินการ เช่น += และ -=
4. ตัวดำเนินการระดับบิต เช่น | และ &
5. ผู้ดำเนินการท่อ