在 Angular 當中,繫結的種類分為兩類,一種是單向另一種則是雙向繫結。
單向繫結包含了內嵌繫結 (Interpolation)、事件繫結 (Event Binding)、屬性繫結 (Property Binding / Attribute Binding)、樣式繫結 (Style Binding) 與類別繫結 (Class Binding),而本文要介紹的就是屬於內嵌繫結。
而雙向繫結則是透過語法糖 [(ngModel)] 來達成。
另外,原先安排將會一次介紹完所有的繫結方法,但我看了很多次之後仍然無法完全理解每個繫結的方法,所以將依照不同的繫結方法逐一寫成文章介紹。
內嵌繫結就只是將資料繫結在 html 標籤上,以下直接範例:
<h1>{{ title }}</h1>
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。