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

- 日理万妓 2021-09-27 08:24 386阅读 0赞

# 前言 #

上一篇博客介绍了数据绑定，意犹未尽，所以这片博客再介绍一下HTML属性绑定和DOM绑定。

# 内容 #

![这里写图片描述][70]  
![这里写图片描述][70 1]  
基本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}">

样式绑定如下：

通过图形和简单的代码介绍了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 #

谢谢您的阅读！

[70]: /images/20210923/92f31848e49a45a5860d2fcd4a3dca4d.png
[70 1]: /images/20210923/7f4a358437d04f16acf5707e32abcc6c.png