Angular 样式绑定

1. style.propertyName

[style.Css属性名] = 'Css属性值变量'/"'css属性值'"

// app.component.ts
export class AppComponent {
    fontSize = '32px';
}

// app.component.html
<div [style.fontSize]="fontSize" [style.color]="'red'">styleBinding</div>

效果:
Angular 样式绑定

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>

效果:
Angular 样式绑定

Angular 样式绑定

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; }

效果:
Angular 样式绑定

Angular 样式绑定