Angular中資料文本綁定、綁定Html、綁定屬性、雙向資料綁定的實作方式

場景

Angular介紹、安裝Angular Cli、建立Angular項目入門教程：

Angular建立元件以及元件之間的調用：

通過以上搭建起Angular項目後，怎樣進行資料的綁定。

實作

資料文本綁定

使用{{}}

首先在news.component.ts中聲明屬性

public title = "霸道流氓氣質"      

然後在news.component.html中綁定屬性

{{title}}      

也可以直接在html中使用其進行簡單的資料計算

1+1={{1+1}}      

綁定Html

可以使用綁定屬性的方式，給div綁定innerHTML屬性來實作

在ts中聲明屬性

public ht = "<h2>這是一個h2，使用innerHTML來綁定</h2>"      

在html中通過[]綁定屬性

<div [innerHTML]="ht"></div>      

綁定屬性

上面可知使用[]來綁定某元素的屬性，比如

聲明兩個屬性

public id = "123"
  public msg = "這是一個title"      

然後在html中

<div [id]="id" [title]="msg">綁定屬性使用[]</div>      

雙向資料綁定

使用雙向資料綁定需要在項目中引入FormModule

打開項目的根子產品app.module.ts

import { FormsModule } from '@angular/forms';      

并且在imports中添加

然後回到需要雙向資料綁定的子產品的ts中，添加一個屬性

public inputValue ="預設值"      

<input type ="text" [(ngModel)]="inputValue"/>
{{inputValue}}      

檢視效果