Angular21 動態綁定CSS樣式

1 需求

　　在前端開發中通常需要動態對某些元素的樣式進行動態設定，傳統的CSS綁定分為CSS類綁定和Style樣式綁定；在Angular中利用相關指令同樣可以完成CSS類綁定和CSS樣式綁定

 

2 內置指令

　　在angular中指令是作用在特定的DOM元素上的，目的是用來擴展元素的功能，為元素添加新的功能；angular框架本身提供的指令就叫做內置指令，例如：NgClass、NgStyle、NgIf、NgFor、NgSwitch等，利用NgClass、NgStyle和Class指令來動態綁定CSS樣式

　　技巧01：angular中的指令的類型首字母都是大寫，但是在運用到DOM元素時需要將首字母變成小寫，例如

　　　　

 

3 利用NgClass指令實現CSS類綁定

　　利用NgClass同時綁定一個或者多個CSS類

　　3.1 NgClass綁定格式

　　　　[ngClass]="{ CSS類名01：布爾類型，CSS類名：布爾類型 }"

　　　　[ngClass]="styleMethod()"

　　　　坑01：styleMethod是一個自定義的方法，該方法返回的是一個對象，該對象的格式是： { CSS類名01：布爾類型，CSS類名：布爾類型 }

　　　　技巧01：對象的鍵最好用引號括起來，因為有的字符如果不用引號括起來就會報錯，例如 _

　　　　技巧02：對象的鍵值如果有特殊字符就需要用引號括起來，否則會報錯（PS: 最好都用引號括起來）

　　3.2 實際例子01

    <p [ngClass]="{style01: true, style02: true}">
      Donnot aim for your success if you really want it. Just stick to do what you love and believe in.
    </p>

.style01 {
    color: yellow;
    font-size: 14px;
}
.style02 {
    background-color: red;
}

 

　　3.3 實際例子02

    <p [ngClass]="styleMethod01()">
      100% Capri employees model clothing while walking through the Bal Harbour Shops in Miami, 
      Florida, U.S., on Friday, Jan. 26, 2018. While some malls are desperately seeking financial
       lifelines, Bal Harbour Shops is planning a $400 million expansion.
    </p>

  styleMethod01() {
    const style = {
      style01: true,
      style02: true
    };
    return style;
  }

.style01 {
    color: yellow;
    font-size: 14px;
}
.style02 {
    background-color: red;
}

　　

　　3.4 效果展示

　　　　

　　　　

 

4 利用NgStyle指令實現Style樣式綁定

　　利用NgStyle可以同時綁定一個或者多個內聯樣式的綁定

　　4.1 NgStyle綁定格式

　　　　[ngStyle]="{ 內聯樣式名稱01：樣式值，內聯樣式名稱02：樣式值}"

　　　　[ngClass]="styleMethod()"

　　　　坑01：styleMethod是一個自定義的方法，該方法返回的是一個對象，該對象的格式是：{ 內聯樣式名稱01：樣式值，內聯樣式名稱02：樣式值 }

　　　　坑02：內聯樣式名稱最好用引號括起來，樣式值必須用引號括起來

　　　　坑03：樣式名稱最好和CSS樣式書寫的格式保持一致，雖然有的樣式名稱可以進行一些變化，例如，CSS的寫法是font_size，在NgStyle中的寫法可以指font_size也可以是fontSize，只不過寫成font_size時必須用引號括起來否則會報錯，因為font_size里面包含了特殊字符

 　　4.2 實例例子01

    <p [ngStyle]="{color: 'red', 'font-size': '24px'}">
      Shame may restrain what law does not prohibit.
    </p>

 

　　4.3 實際例子02

    <p [ngStyle]="styleMethod02()">
      Shame may restrain what law does not prohibit.
    </p>

  styleMethod02() {
    const style = {
      'color': 'red',
      'font-size': '24px'
    };
    return style;
  }

 

　　4.4 實際效果展示

 　　　　

　　　　

 

5 利用Class指令實現單個CSS類綁定

　　Class指令只能綁定要給CSS類

　　5.1 Class綁定格式

　　　　[class.樣式類名稱]=“布爾類型”

　　　　[class.樣式類名稱]=“styleMethod()”

　　　　坑01：styleMethod是一個自定義方法，該方法的返回值必須是一個布爾類型

　　5.2 實際例子01

    <p [class.style03]="true">
      you know that all there is desire, thought, boding and longing;
    </p>

.style03 {
    color: skyblue;
    font-size: 30px;
}

 

 　　5.3 實際例子02

    <p [class.style03]="styleMethod03()">
      you know that all there is desire, thought, boding and longing;
    </p>

  styleMethod03() {
    return true;
  }

.style03 {
    color: skyblue;
    font-size: 30px;
}

 

　　5.4 效果展示

　　　　

　　　　

 

6 本博客代碼匯總

　　6.1 HTML代碼

<div class="panel panel-primary">
  <div class="panel-heading">動態設置class的三種方式</div>
  <div class="panel-body">
    <h3>利用ngClass指令實現</h3>
    <p [ngClass]="{'style01': 'true', 'style02': 'true'}">
      Donnot aim for your success if you really want it. Just stick to do what you love and believe in.
    </p>
    <p [ngClass]="styleMethod01()">
      100% Capri employees model clothing while walking through the Bal Harbour Shops in Miami, 
      Florida, U.S., on Friday, Jan. 26, 2018. While some malls are desperately seeking financial
       lifelines, Bal Harbour Shops is planning a $400 million expansion.
    </p>
    <hr />

    <h3>利用ngStyle指令實現</h3>
    <p [ngStyle]="{color: 'red', 'font-size': '24px'}">
      Shame may restrain what law does not prohibit.
    </p>
    <p [ngStyle]="styleMethod02()">
      Shame may restrain what law does not prohibit.
    </p>
    <hr />

    <h3>利用class指令實現</h3>
    <p [class.style03]="true">
      you know that all there is desire, thought, boding and longing;
    </p>
    <p [class.style03]="styleMethod03()">
      you know that all there is desire, thought, boding and longing;
    </p>

  </div>
  <div class="panel-footer">2018-3-8 10:14:57</div>
</div>

　　6.2 CSS代碼

.style01 {
    color: yellow;
    font-size: 14px;
}
.style02 {
    background-color: red;
}

.style03 {
    color: skyblue;
    font-size: 30px;
}

　　6.4 TypeScript代碼

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

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

  constructor() { }

  ngOnInit() {
  }

  styleMethod01() {
    const style = {
      style01: true,
      style02: true
    };
    return style;
  }

  styleMethod02() {
    const style = {
      'color': 'red',
      'font-size': '24px'
    };
    return style;
  }
  
  styleMethod03() {
    return true;
  }

}