遵循Bootstrap的设计，我们会使用 bootswatch.com 提供的免费主题来实现上面的效果。Bootswatch为前端程序员提供了多达21种免费的Bootstrap主题，并且提供了和 ，介绍如何在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> <a href="#" ><i></i></a> <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div> <ul> <li> <a href="#" >Home <span>(current)</span></a> </li> <li> <a href="#" >Link</a> </li> <li *ngIf="themes"> <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 主题 </a> <div 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); } }