提姆寫程式

0%

Angular 筆記 - 內嵌繫結 Interpolation

發表於 更新於 分類於 Disqus：
雙大括號的內嵌繫結

angular

基礎認識

使用兩個大括號的語法就稱為內嵌繫結，屬於單向的繫結，只有將元件中 component 的資料傳送到網頁元素 template 上顯示。

將文字與連結內容呈現於網頁上

目前在 HTML 程式碼如下：
HTML

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

app.component.ts 內容如下：
TS

1
2
3
4
5
6
7
8
9
10
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  title = "提姆寫程式 Tim Coding Blog";
}

基本上透過 Angular CLI 已經建置好大多數的程式碼，對應的路徑也都已經設定好，沒有意外是不需要特別更動，修改的只有在 export class AppComponent 這個物件中的屬性與其值。

可以看到使用內嵌繫結，將 component 的值給予 Angular Title，透過雙括號的對應，就會同步顯示於網頁上。

將連結改為雙括號形式寫法

HTML

1
<a href="{{url}}" target="_blank">提姆寫程式</a>

TS

1
2
3
4
5
6
7
8
9
10
11
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  title = "Angular Title";
  url = "https://hsuchihting.github.io/";
}

DEMO: https://stackblitz.com/edit/angular-ivy-yf4ayv?embed=1&file=src/app/app.component.ts