การผูกค่ากับคุณสมบัติ DOM ขององค์ประกอบใน Angular

ใน Angular มีการแยกแยะการผูกค่ากับแท็กออกเป็นสองประเภท: การผูกกับแอตทริบิวต์ของแท็ก และการผูกกับคุณสมบัติ DOM ขององค์ประกอบ โดยปกติแล้วทั้งสองอย่างนี้คือสิ่งเดียวกัน แต่บางครั้งก็มีความแตกต่างสำคัญ

ลองมาดูสองวิธีนี้ด้วยตัวอย่างกัน สมมติว่าเรามีคุณสมบัติคลาสดังต่อไปนี้:

app/app.component.tsexport class AppComponent {
  public text: string = 'abcde';
}

ลองแสดงค่าของคุณสมบัตินี้ลงในข้อความของ textarea

app/app.component.html<textarea>{{ text }}</textarea>

และตอนนี้ลงในแอตทริบิวต์ placeholder:

app/app.component.html<textarea placeholder="{{ text }}"></textarea>

และตอนนี้เราจะเขียนข้อมูลลงในคุณสมบัติ DOM ขององค์ประกอบโดยตรง สำหรับสิ่งนี้ เราจะใส่ชื่อแอตทริบิวต์ไว้ในวงเล็บเหลี่ยม:

app/app.component.html<textarea [value]="text"></textarea>