Angular 資料繫結 (1) - 內嵌繫結 - 筆記長也NotesHazuya

Angular 資料繫結 (1) - 內嵌繫結

2021-01-04 18:54:00   Angular

資料繫結

在 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。


長也

糾結當中的資管系學生,常碰PHP,喜歡進行網頁相關的設計,閒暇之餘就記錄一些筆記,紀錄自己的學習軌跡。