基於Angular 8和Bootstrap 4實現動態主題切換
效果
首先看看效果：
本文將介紹如何基於Angular 8和Bootstrap 4來實現上面的主題切換效果。
設計
遵循Bootstrap的設計，我們會使用 bootswatch.com 提供的免費主題來實現上面的效果。Bootswatch為前端程式設計師提供了多達21種免費的Bootstrap主題，並且提供了 API文件 和 例項頁面 ，介紹如何在HTML+jQuery的環境中實現主題切換。其實，我們也可以使用Bootstrap官網提供的主題設計工具來設計自己的主題，這些自定義的主題也是可以用在本文介紹的方法裡的，只需要替換相關的資源地址就可以。如果你開啟Bootswatch的API，你就會看到各種主題的元資料資訊，我們可以使用其中的cssMin連結來替換主頁的link地址，以達到切換主題的目的。
在開工之前，還是要做一些粗略的設計。為了簡單起見，我使用Bootstrap的Navbar來完成這個功能，因為Navbar的程式碼可以直接從Bootstrap官網拷貝過來，稍微改改就行。不同的是，我將Navbar封裝在一個元件（Component）裡，這樣做的好處是，可以將切換主題的功能封裝起來，以實現模組化的設計。下圖展示了這一設計：
基本流程如下：
- theme.service.ts提供從Bootswatch獲取主題資訊的服務
- 主應用app.component.ts呼叫theme.service.ts，獲取主題資訊，並將主題資訊繫結到nav-bar.component.ts元件
- 第一次執行站點，站點會使用定義在environment.ts中的預設值作為預設主題，當每次切換主題時，會將所選主題繫結到nav-bar.component.ts上，用來在下拉選單中標註已選主題，並將所選主題名稱儲存在LocalStorage，以便下次啟動站點時直接應用已選主題
- nav-bar.component.ts元件會在Navbar上的dropdown中列出所有的主題名稱，並且標註所選主題，當用戶點選某個主題名稱時，就會觸發themeSelectionChanged事件，app.component.ts接收到這個事件後，就會替換主頁的link，完成主題設定
步驟
首先，根據Bootswatch API所返回的資料結構，定義一個數據模型：
export class ThemeDefinition {
name: string;
description: string;
thumbnail: string;
preview: string;
css: string;
cssMin: string;
cssCdn: string;
scss: string;
scssVariables: string;
}
export class Themes {
version: String;
themes: ThemeDefinition[];
}
然後，建立theme.service.ts服務，用來呼叫Bootswatch API：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Themes } from '../models/themes';
@Injectable({
providedIn: 'root'
})
export class ThemeService {
constructor(private http: HttpClient) { }
getThemes(): Observable<Themes> {
return this.http.get<Themes>('http://bootswatch.com/api/4.json');
}
}
接下來，建立Navbar元件，關鍵程式碼部分就是將主題的名稱繫結到dropdown上，並根據選擇的主題名稱決定當前所顯示的主題名稱是否應該是active的。當然，dropdown的每個item還應該響應使用者的點選事件：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"><i class="fab fa-acquisitions-incorporated"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li *ngIf="themes" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
主題
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a *ngFor="let theme of themes.themes"
[className]="theme.name === selectedTheme ? 'dropdown-item active' : 'dropdown-item'" href="#"
(click)="onThemeItemSelected($event)">{{theme.name}}</a>
</div>
</li>
</ul>
</div>
</nav>
Navbar元件的程式碼如下：
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { Themes } from 'src/app/models/themes';
import { ThemeService } from 'src/app/services/theme.service';
import { ThemeDefinition } from 'src/app/models/theme-definition';
@Component({
selector: 'app-nav-bar',
templateUrl: './nav-bar.component.html',
styleUrls: ['./nav-bar.component.css']
})
export class NavBarComponent implements OnInit {
@Input() themes: Themes;
@Input() selectedTheme:string;
@Output() themeSelectionChanged : EventEmitter<ThemeDefinition> = new EventEmitter();
constructor(private themeService: ThemeService) { }
ngOnInit() {
}
onThemeItemSelected(event: any) {
const selectedThemeName = event.target.text;
const selectedTheme = this.themes.themes.find(t => t.name === selectedThemeName);
this.themeSelectionChanged.emit(selectedTheme);
}
}
在onThemeItemSelected事件處理函式中，會讀取被點選dropdown item的名稱，根據該名稱找到所選的主題，然後將其作為事件資料，發起themeSelectionChanged事件，然後，就是app.component.ts來處理這個事件了。在該事件處理函式中，從事件資料獲取主題資訊，然後呼叫applyTheme方法來應用主題：
import { Component, OnInit } from '@angular/core';
import { ThemeDefinition } from './models/theme-definition';
import { Themes } from './models/themes';
import { ThemeService } from './services/theme.service';
import { environment } from 'src/environments/environment';
import { StorageMap } from '@ngx-pwa/local-storage';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'nblogger';
themes: Themes;
selectedTheme: string;
constructor(private themeService: ThemeService,
private storage: StorageMap) {
}
ngOnInit() {
this.themeService.getThemes()
.subscribe(data => {
this.themes = data;
this.storage.get('app-theme-name').subscribe(name => {
const themeName = name ? name : environment.defaultTheme;
const currentTheme = this.themes.themes.find(t => t.name === themeName);
this.applyTheme(currentTheme);
});
});
}
onThemeSelectionChanged(event: ThemeDefinition) {
this.applyTheme(event);
}
private applyTheme(def: ThemeDefinition): void {
this.storage.set('app-theme-name', def.name).subscribe(()=>{});
this.selectedTheme = def.name;
const links = document.getElementsByTagName('link');
for(let i = 0; i < links.length; i++) {
const link = links[i];
if (link.getAttribute('rel').indexOf('style') !== -1 &&
link.getAttribute('type').indexOf('text') !== -1) {
link.setAttribute('href', def.cssMin);
}
}
}
}
在applyTheme方法中，首先會將所選主題名稱設定到LocalStorage中，以便下次開啟頁面的時候能夠直接應用主題；然後，從當前document中找到所需的link tag，並將其href值替換為所選主題資訊的cssMin連結地址（內容可以參考Bootswatch的API結果）以此完成主題替換。
當重新開啟頁面時，app.component.ts中的ngOnInit初始化方法會被首先呼叫，它會通過theme.service.ts來讀取主題資訊，之後判斷LocalStorage中是否有已經設定好的主題。如果有，則使用該主題，否則就從environment.ts的預設值中選擇主題名稱進行設定。
app.component.ts所使用的template就比較簡單，主體是對Navbar元件的引用，還可以加一些額外的HTML元素進行效果測試：
<app-nav-bar [themes]="themes" [selectedTheme]="selectedTheme" (themeSelectionChanged)="onThemeSelectionChanged($event)"></app-nav-bar>
<div class="container">
<article>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
</article>
<div class="alert alert-primary" role="alert">
這是一個警告框
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-danger">失敗</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-info">資訊</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</div>
當然，記得在index.html中加入link的佔位符，以便上面的applyTheme方法能夠找到它：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Nblogger</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" type="text/css" href="#"> </head> <body> <app-root></app-root> </body> </html>
總結
我們可以將Bootswatch的所有主題下載到本地，由本地服務來提供主題的API，這樣切換主題會變得更快，也可以自己自定義主題然後擴充套件這個自制的本地API來提供更豐富的主題，根據需要來定吧。
Happy coding…
（總訪問量：17；當日訪問量：1）
「其他文章」
- Apache Kafka快速演練
- Saga體系結構模式：微服務架構下跨服務事務的實現
- 快速理解ASP.NET Core的認證與授權
- Visual Studio 2022新特性
- 徒手打造基於Spark的資料工廠（Data Factory）：從設計到實現
- 何時使用領域驅動設計
- Angular SPA基於Ocelot API閘道器與IdentityServer4的身份認證與授權（三）
- Angular SPA基於Ocelot API閘道器與IdentityServer4的身份認證與授權（一）
- 在Ocelot中使用自定義的中介軟體（一）
- 基於Angular 8和Bootstrap 4實現動態主題切換
- ASP.NET Core 2.0 Web API專案升級到ASP.NET Core 3.0概要筆記