Angular中數據文本綁定、綁定Html、綁定屬性、雙向數據綁定的實現方式

場景

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項目后，怎樣進行數據的綁定。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

數據文本綁定

使用{{}}

首先在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 ="默認值"

然后在html中

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

查看效果