[Angular 元件庫 NG-ZORRO 基礎入門] - 主題切換 - 2

11th鐵人賽

simplejason

2019-09-20 20:12:02

1788 瀏覽

分享至

前言回顧

昨天介紹的主題方案，打包成多個主題包形式，當然也有通過修改 class 動態新增主題樣式的方式，我們也對其他幾種方式做個簡單介紹，更多的可參考文後的資料連結。

主題

class 切換

我們知道，以前我們使用不同 css 檔案來處理不同主題時，只要修改對應的 class 即可：

<div class="dark"></div>
<div class="light"></div>

css 覆蓋：

.dark {}
.light {}

這樣，在元素的 class 切換時不同的 css 會重新渲染繫結的元素，對於 Angular 專案我們同樣可以建立一個指令(Directive) 來動態修改 HTMLElement 的 class：

$ cd ng-zorro-ironman2020
$ ng g directive services/theme --skip-import

修改指令內容：

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
@Directive({
  selector: '[appTheme]'
})
export class ThemeDirective implements OnChanges {
  @Input('appTheme') theme: string;
  constructor(private el: ElementRef<HTMLElement>) {}
  ngOnChanges() {
    this.el.nativeElement.setAttribute('class', this.theme);
  }
}

這樣，在任意元素上我們就可以使用這個指令來動態變化其 class 值，使用方式也很簡單：

<div [appTheme]="'dark'"></div>
<div [appTheme]="'light'"></div>

剩下的就是對不同 class 做樣式設計了，點選檢視 stackblitz 線上程式碼。

`:host-context()`

我們在閱讀 Angular 文件時，發現它在元件樣式一節介紹了一個方法 :host-context()，它是這樣介紹的：

有時候，基於某些來自元件檢視外部的條件應用樣式是很有用的。例如，在文件的 <body> 元素上可能有一個用於表示樣式主題 (theme) 的 CSS 類，你應當基於它來決定元件的樣式。
這時可以使用 :host-context() 偽類選擇器。它也以類似 :host() 形式使用。它在當前元件宿主元素的祖先節點中查詢 CSS 類，直到文件的根節點為止。在與其它選擇器組合使用時，它非常有用。

同樣地，我們看一下 stackblitz 線上程式碼，效果是一樣的，我們甚至可以在 :host-context() 中使用 @import 引入不同的樣式檔案來管理。