在Angular4中如何實作HTML屬性綁定

這篇文章主要為大家介紹了關於Angular4學習教程之HTML屬性綁定的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值

前言

本文主要為大家介紹了關於Angular4 HTML屬性綁定的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

簡介

#基本HTML屬性

<td [attr.colspan]="tableColspan"></td>

Css 類別綁定

<!-- 第一种情况 class 类全部替换 -->
<p [class]="pClass">CSS 类绑定，[class] 全部替换的例子</p>
<!-- 第二种情况 替换 class 类的部分属性 --> 
<p [class.a]="isSpcial">CSS 类绑定，[class.sepcial] 部分替换的例子</p> 
<!-- 第三种情况 根据表达式显示部分 class 属性-->
<p [ngClass]="{a:isA, b:isB}">CSS 类绑定，[ngClass] 替换多个的例子</p>

Style 屬性綁定

 <!-- 替换部分的 Style -->
 <button [style.color]="isSpecial ? &#39;red&#39; : &#39;green&#39;" ]>Red</button> 
 <!-- 替换所有的样式 -->
 <button [ngStyle]="{&#39;font-style&#39;:this.canSave? &#39;italic&#39; : &#39;normal&#39;}" ]>Red</button>

HTML屬性綁定

<td [attr.colspan]=”tableColspan”>Something</td>

tableColspan 是一個表達式，當介面在渲染的時候會將tableColspan的值綁定到attr後面的colspan 上面去

修改bind.component.html

<!-- 增加代码 -->
<p>
 <p>[attr.colspan] 例子：</p>
 <table border="1px">
 <tr>
 <td [attr.colspan]="colspanSize">跨列的例子</td>
 </tr>
 <tr>
 <td>单元格1</td>
 <td>单元格1</td>
 </tr>
 </table>

圖示：

##Css 類別綁定

#第一種情況

[calss]

someExpression 的值會完全替換掉class的值。

修改bind.component.css

.a{background-color: #A7A9AE;}
.b{color: #488aff;}
.c{font-size: 1rem;}

修改bind.component.html

<!-- 增加代码 -->
<p>
 <p>CSS 类绑定例子1：[class]</p>
 <p [class]="pClass">CSS 类绑定，[class] 全部替换的例子</p>
</p>

修改bind.component.ts

pClass: string;
constructor() {
 //在3秒钟之后将样式设置为 " a b c "
 setInterval(()=>{
 this.pClass = "a b c";
 }, 3000)
}

圖示：

第二種情況

[calss.special]

isSpecial 是一個boolean，當isSpecial 為true 的時候會出現special 的值，當false的時候不會出現。

修改bind.component.html

<!-- 增加代码 -->
<p [class.a]="isSpcial">CSS 类绑定，[class.sepcial] 部分替换的例子</p>

修改bind.component.ts

pClass: string;
isSpcial: boolean = false;
constructor() {

 setInterval(()=>{
 this.pClass = "a b c";
 
 //在 3秒钟之后显示样式
 this.isSpcial = true;
 }, 3000)
}

圖示：

第三種情況

[ngClass]="{aaa:isA, bbb: isB}"

aaa 是指標籤上面class 的屬性值，isA 就boolean， 只有當isA 為true 的時候才會顯示aaa 屬性。同理，bbb 也是一樣。

修改bind.component.html

<!-- 增加代码 -->
<p [ngClass]="{a:isA, b:isB}">CSS 类绑定，[ngClass] 替换多个的例子</p>

修改bind.component.ts

pClass: string;
isSpcial: boolean = false;
isA: boolean = false;
isB: boolean = false;
constructor() {
 setInterval(()=>{
 this.pClass = "a b c";
 this.isSpcial = true;

 this.isA = true
 this.isB = true
 }, 3000)
}

圖示：

Style 屬性綁定

第一種情況

[style.color] = "isSpecial ? 'red' : 'green' "

控制style樣式的color, 如果isSpecial 的值為true，那麼color的屬性就是red。

第二種情況

[ngStyle]= "{'font-style' : this.canSave ? 'italic' : 'normal' }"

控制樣式font-style 如果this.canSave 的值為trur 那麼樣式就是italic， 否則就是normal

#寫在最後

     1.對於Style的屬性綁定和class 的屬性綁定是一樣的。

     2.對於文章中所使用的程式碼是結合了Angular2學習筆記之資料綁定上面的範例所做的，連結位址：//www.jb51.net/article/132122.htm

#上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

如何在javascript中實現最長公共子序列

#在Node.js中如何取得檔案上傳進度？

為什麼Node.js會成為網頁應用程式開發？

javascript該如何實現獲取日期段內每天不同的價格#

以上是在Angular4中如何實作HTML屬性綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！