快速入門Angular(三)：單向綁定、屬性綁定、雙向綁定

綁定 HTML 屬性示範程式

有一 Component 內容如下

@Component({
 selector: 'home',
 templateUrl: './home.component.html',
 stylesUrl: ['./home.component.scss']
})
export class HomeComponent {
 name: string = '我的名字'; //單向綁定、雙向綁定
 title: string = '這是標題'; //屬性綁定
 content: string = '<h3>帶HTML標籤的字串</h3>' //innerHTML
 bool: boolean = false; //單向綁定的簡短表達式
}
onClick(value: string): void {  //事件綁定
 alert("Hello " + value);
 }

單向綁定：{{}} - 在 html 畫面中顯示資料

若要將值直接顯示在 HTML 上，使用{{name}}，就會將我的名字渲染上去
而`{{}}`裡面，也允許做一些簡單的運算，比如寫成 {{1+1}}，則會計算出2
或寫簡單 if 判斷式{{bool ? 'true才會顯示': 'false才會顯示'}}
由於 bool 是false，此時會渲染出false才會顯示 這行文字

屬性綁定：[] - 綁定 HTML 原生元素裡

使用[]把 Component 裡的參數，綁定至 HTML 原生元素裡

<div [title]="title"></div>

就會將這是標題賦值過去

若是綁定參數中，帶有 HTML 標籤，直接使用{{content}}
會發現完全當成字串使用，若要使其渲染成 HTML，則寫成

<span [innterHTML]="content"></span>

事件綁定：() - 綁定 click…等 html 事件

當發生指定 event 時，可以指定 class 裡的 function
使用()來綁定，也可以傳值進 function

<button (click)="onClick('World')">Font color</button>

雙向綁定：[()] - 綁定 html 可互動的元素，如 input…

用於可以讓使用者互動的 HTML 元素，如<input>、<select>、<textarea>等
讓使用者在 HTML 輸入的值可以跟 class 裡的參數即時互動
即當 value 在 class 中發生變化，HTML 就會跟著改變；在 HTML 中發生變化，class 中的內容也會跟著改變
使用[()]來綁定
由於雙向綁定是寫在FormsModule裡面
因此在主 Module 裡面：
import { FormsModule } from '@angular/forms';
接著@NgModule的imports引入FormsModule，就可以使用了！

<input type="text" [(ngModel)]="name" />