資料繫結

在 Angular 當中，繫結的種類分為兩類，一種是單向另一種則是雙向繫結。

單向繫結

單向繫結包含了內嵌繫結 (Interpolation)、事件繫結 (Event Binding)、屬性繫結 (Property Binding / Attribute Binding)、樣式繫結 (Style Binding) 與類別繫結 (Class Binding)，而本文要介紹的就是屬於內嵌繫結。

雙向繫結

而雙向繫結則是透過語法糖 [(ngModel)] 來達成。

另外，原先安排將會一次介紹完所有的繫結方法，但我看了很多次之後仍然無法完全理解每個繫結的方法，所以將依照不同的繫結方法逐一寫成文章介紹。

內嵌繫結 (Interpolation)

內嵌繫結就只是將資料繫結在 html 標籤上，以下直接範例：

app.component.html

<h1>{{ title }}</h1>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular 筆記長也';
}

執行 ng serve 可以看到 compoment 裡面定義的 title 被渲染到 html 上面了。

下一篇會繼續介紹屬性繫結 Property Binding。