การผูกข้อมูล เชื่อมต่อคลาสของคอมโพเนนต์กับเทมเพลตของมัน Angular มีสี่รูปแบบ ซึ่งแตกต่างกันตามทิศทาง ของการไหลของข้อมูล และไวยากรณ์ที่โดดเด่น
1. Interpolation — คลาส → มุมมอง (ข้อความ)
html
{{ title }}
{{ price * quantity }}
การผูกข้อมูล เชื่อมต่อคลาสของคอมโพเนนต์กับเทมเพลตของมัน Angular มีสี่รูปแบบ ซึ่งแตกต่างกันตามทิศทาง ของการไหลของข้อมูล และไวยากรณ์ที่โดดเด่น
{{ title }}
{{ price * quantity }}
<img [src]="imageUrl" /> <!-- bind a DOM property -->
<button [disabled]="isLoading">Save</button>
<app-child [user]="currentUser"></app-child> <!-- pass to a component @Input -->
วงเล็บเหลี่ยม [ ] ผูกพร็อพเพอร์ตี้กับนิพจน์ (ทางเดียว ข้อมูลไหลลง ลงไป ในมุมมอง)
<button (click)="save()">Save</button> <!-- DOM event → method -->
<input (input)="onInput($event)" /> <!-- $event = the event object -->
<app-child (deleted)="onDeleted($event)"></app-child> <!-- component @Output -->
วงเล็บ ( ) ฟังเหตุการณ์ (ทางเดียว ข้อมูลไหล ขึ้น จากมุมมองไปยังคลาส)
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
ไวยากรณ์ [(...)] ("กล้วยในกล่อง") รวมพร็อพเพอร์ตี้ binding + event binding สำหรับการซิงค์สองทาง — โดยทั่วไปกับ ngModel บนอินพุตฟอร์ม
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
สองทิศทาง [()] เป็นเพียง property binding [] บวก event binding () รวมกัน — วงเล็บแสดงทิศทาง
การผูกข้อมูล คือวิธีที่ Angular รักษาคลาสและเทมเพลตให้อยู่ในสถานะซิงค์ — มันคือกลไกเบื้องหลังทุกอินเทอร์เฟซผู้ใช้แบบไดนามิก
การรู้จักสี่ประเภทและไวยากรณ์ของมัน ({{}}, [], (), [()]) และทิศทางที่แต่ละไหลนั้นจำเป็นไม่可แก้ สำหรับการอ่านและเขียนเทมเพลต Angular ใดๆ เกือบทุกบรรทัดของเทมเพลต Angular ใช้หนึ่งในนั้น