前言

上一篇部落格介紹了資料繫結，意猶未盡，所以這片部落格再介紹一下HTML屬性繫結和DOM繫結。

內容

基本HTML屬性繫結如下：

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

CSS類繫結如下：

<div class="aaa bbb" [class]="someExpression">something</div>
<div [class.special]="isSpecial">something</div>
<div [ngClass]="{aaa:isA,bbb:isB}"
 
>

樣式繫結如下：

<button [style.color] = "isSpecial ? 'red':'green'">Red</button>
<div [ngStyle]="{'font-style'=this.canSave ?' italic':'normal'}">

通過圖形和簡單的程式碼介紹了DOM屬性繫結和HTML屬性繫結，現在用例子來說一下如何將靜態頁面變為動態頁面：
靜態：
HTML：

<p>
    bind works!
</p>
<div class="a b c">慕課網</div
 
>

動態方法1：
HTML：

<p>
    bindworks!
</p>    
<divclass="a b"[class.c]="isBig">慕課網</div>

TypeScript：

import{Component,OnInit}
from'@angular/core';
@Component({
    selector:'app-bind',
    templateUrl:'./bind.component.html',
    styleUrls:['./bind.component.css']
})
exportclassBindComponentimplementsOnInit{
    isBig
 
:boolean=false;
    constructor(){
        setTimeout(()=>{this.isBig=true;
        },3000);
    }
    ngOnInit(){
    }
}

上面這段程式碼的內容是：

將c處增加一個語法，一開始語法是false，3秒後語法變為true，這個時候就會將c的css屬性增加到內容中，使得c的實行就在內容中顯示出來了。
另外的

動態方法2：

<p>
    bindworks!
</p>    
<div [ngClass]="divClass">慕課網</div>

TypeScript：

import{Component,OnInit}
from'@angular/core';
@Component({
    selector:'app-bind',
    templateUrl:'./bind.component.html',
    styleUrls:['./bind.component.css']
})
exportclass BindComponent implements nInit{
    divClass:any={
        a:false,
        b:false,
        c:false
    }
    constructor(){
        setTimeout(()=>{
            this.divClass={
            a:true,
            b:true,
            c:true
            };
        },3000);
    }
    ngOnInit(){
    }
}

上面這段程式碼是建立在動態方法1基礎之上的，因為這個方法只需要在前端引用一個表示式就可以實現動態的功能。

總結

其實我們在使用HTML屬性和DOM屬性的時候，可以留意一下如下六點：
1. 少量HTML屬性和DOM屬性之間有著 1:1 的對映，如id
2. 少量HTML屬性沒有對應的DOM屬性，如colspan
3. 有些DOM屬性沒有對應的HTML屬性，如textContent
4. 就算名字相同，HTML屬性和DOM屬性也不是同一樣東西
5. HTML屬性的值指定了初始值；DOM屬性的值表示當前值。DOM屬性的值可以改變；HTML屬性的值不能改變
6. 模版繫結是通過DOM屬性和時間來工作的，而不是HTML屬性

end

謝謝您的閱讀！