前言

上一篇博客介绍了数据绑定，意犹未尽，所以这片博客再介绍一下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

谢谢您的阅读！

Angular--HTML属性绑定和DOM属性绑定

前言

内容

总结

end

猜你喜欢