Angular4学习笔记--HTML属性绑定

傷城~ 2022-05-28 01:46 137阅读 0赞

Css 类绑定

<div [class]="divClass">CSS 类绑定，[class] 全部替换的例子</div>
    
    
    <div [class.a]="isSpcial">CSS 类绑定，[class.sepcial] 部分替换的例子</div>
    
    
    <div [ngClass]="{a:isA, b:isB}">CSS 类绑定，[ngClass] 替换多个的例子</div>

Style 属性绑定

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

## HTML属性绑定 ##

<td [attr.colspan]=”tableColspan”>Something</td>
    tableColspan 是一个表达式，当界面在渲染的时候会将 tableColspan的值绑定到 attr后面的 colspan 上面去

<div>
        <div>[attr.colspan] 例子：</div>
    <table border="1px">
    <tr>
        <td [attr.colspan]="colspanSize">跨列的例子</td>
        </tr>
        <tr>
            <td>单元格1</td>
        <td>单元格1</td>
        </tr>
         </table>

## 浏览器效果 ##

![70][]

## Css 类绑定 ##

### 第一种 ###

[calss]
    someExpression 的值会完全替换掉 class的值。

CSS样式

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

HTML代码

<div>
        <div>CSS 类绑定例子1：[class]</div>
    <div [class]="divClass">CSS 类绑定，[class] 全部替换的例子</div>
    </div>

ts控制

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

## 浏览器效果 ##

![70 1][]

### 第二种  ###

[calss.special]
    isSpecial 是一个 boolean，当 isSpecial 为 true 的时候会出现 special 的值，为 false的时候不会出现。

HTML

<div [class.a]="isSpcial">CSS 类绑定，[class.sepcial] 部分替换的例子</div>

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

## 浏览器效果 ##

![70 2][]

### 第三种     ###

[ngClass]="{aaa:isA, bbb: isB}"
    aaa 是指标签上面class 的属性值，isA 就boolean， 只有当 isA 为 true 的时候才会显示 aaa 属性。 同理，bbb 也是一样。

HTML

<div [ngClass]="{a:isA, b:isB}">CSS 类绑定，[ngClass] 替换多个的例子</div>

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

## 浏览器效果 ##

![70 3][]

## 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学习笔记之数据绑定上面的例子做的，
    链接地址：https://segmentfault.com/a/1190000012674948

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[70]: /images/20220528/4c43bd93c22347a6b138100450eac840.png
[70 1]: /images/20220528/c3bd3fca38a14224acff657f10a43e93.png
[70 2]: /images/20220528/79890415116842679b4a0e683905f369.png
[70 3]: /images/20220528/906478bbf70f4797a814defc03bee3bb.png
[20191229112121499.png]: /images/20220528/e60b88f8175c469ab523928d6bf748c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220528/d19c53e23df54f65890ac60a370878f4.png