基於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>('https://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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a> </li> <li *ngIf="themes" class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" (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="/" rel="external nofollow" > <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <app-root></app-root> </body> </html>
總結
我們可以將Bootswatch的所有主題下載到本地,由本地服務來提供主題的API,這樣切換主題會變得更快,也可以自己自定義主題然後擴充套件這個自制的本地API來提供更豐富的主題,根據需要來定吧。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。