基礎認識

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

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

目前在 HTML 程式碼如下：

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

app.component.ts 內容如下：

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

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

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

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

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

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

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/";
}

所呈現頁面如下圖：