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…

我只是用來筆記的