angular样式绑定

1. style.propertyName

   // app.component.ts
    export class AppComponent {
        fontSize = '32px';
    }
    
    // app.component.html
    <div [style.fontSize]="fontSize" [style.color]="'red'">styleBinding</div>
   复制代码

   效果:

   

2. ngStyle

   [ngStyle]="{'css属性名': 'css属性值'}"

   [ngStyle]="{'css属性名': 判断语句 ？'判断语句为true时的css属性值' : '判断语句为false时的css属性值'}"

   // app.component.ts
    export class AppComponent {
        isMax = false;
    }
    
    // app.component.html
    //Css属性值-固定值
    <div [ngStyle]="{'color': 'red'}">ngStyle</div>
    //Css属性值-经过判断取值
    <div [ngStyle]="{'font-size': isMax ? '24px' : '12px'}">ngStyle-添加判断</div>
   复制代码

   效果

   

   

3. ngClass [ngClass]="{'须要添加的类名': 判断语句}"；；；当条件为ture时，添加类；为false时，不添加该类

// app.component.ts
export class AppComponent {
    isActive = true;
     isFocus = true;
}

// app.component.html
// 一个类经过判断添加
<div [ngClass]="{'active': isActive}">ngClass</div>
// 多个类经过判断添加时，用逗号隔开
<div [ngClass]="{'active': isActive, 'primary': isFocus}">ngClass</div>

// app.component.css
.active { background: #d0d0d0;}
.primary { color: #198fff; }
复制代码

效果:

原文地址： www.cnblogs.com/zero-zm/p/9…

我只是用来笔记的