angular6 ngClass 和 ngStyle学习笔记

文章参考

1. Angular2 ngclass与ngstyle的使用
   

知识点

ngClass

1. [ngClass]="‘css类1 css类2’"
   字符串以空格分割形式。
2. [ngClass]="[‘css类1’,‘css类2’]"
   数组形式。
3. [ngClass]="{‘css类1’:true, ‘css类2’:true}"
   key/value形式
4. [ngClass]="{‘css类1 css类2’:true}"
   多类key/value形式
5. [ngClass]=“stringExp|arrayExp|objExp”
   表达式形式。

ngStyle

1. [ngStyle]="{‘css属性’:‘属性值’}"
   单个key/value形式
2. [ngStyle]="{‘css属性1’:条件表达式 ？ ‘true时 属性值1’:‘false 时 属性值2’}"
   单个属性值设置，使用三元表达式进行选择
3. [ngStyle]="{‘css属性1’:‘属性值1’, ‘css属性2’:‘属性值2’}"
   多个key/value形式

案例

<div class="style-page">

  <div class="ng-style">
    <h1>ngStyle</h1>
    <div [ngStyle]="{'background-color':'green'}">
        <div>
          ngStyle 使用JSON对象，填写样式
        </div>
    </div>
    
    <div [ngStyle]="{'background-color':username === 'huangbiao' ? 'green' : 'red' }">
      <div>
        ngStyle 使用JSON对象——JSON对象使用三目运算
      </div>
      <button (click)='toggleStyleBgColor($event)'>
        切换背景
      </button>
    </div>
  </div>
  <hr />
  <div class="ng-class">
      <h1>ngClass</h1>
      <div [ngClass]="{'text-success':isSuccess}">
          <div>[ngClass]后面值为JSON，key 为 class名字，value是判断是否显示className 的样式</div>
          <div>
            <button (click)="toggleSuccess()">切换样式</button>
          </div>
      </div>
      <div class="red" [ngClass]="{'font32': true}">
          class="red" 和 [ngClass] 合并使用
      </div>
      <div [ngClass]="{'red font32': true}"> 
          key 使用多个样式的名字
      </div>
      <div [ngClass]="['font32', 'green']">
          使用数组['font32', 'green']
      </div>
  </div>
</div>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-style-class-comp',
  templateUrl: './style-class-comp.component.html',
  styleUrls: ['./style-class-comp.component.scss']
})
export class StyleClassCompComponent implements OnInit {

  username: string;
  isSuccess: boolean;
  constructor() { 
    this.username = 'huangbiao';
    this.isSuccess = true;
  }

  ngOnInit() {
  }

  // 切换style
  toggleStyleBgColor () {
    if (this.username == 'huangbiao') {
      this.username = 'zhangsan';
    } else {
      this.username = 'huangbiao';
    }
  }

  // 切换是否为成功
  toggleSuccess () {
    this.isSuccess = !this.isSuccess;
  }
}

.style-page{
    .font32{
        font-size: 32px;
    }
    .red{
        color: red;
    }
    .green{
        color: green;
    }
    .text-success{
        font-size: 32px;
        color: green;
    }
}