在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> <article> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> </article> <div role="alert"> 这是一个警告框 </div> <div role="alert"> A simple secondary alert—check it out! </div> <div role="alert"> A simple success alert—check it out! </div> <div role="alert"> A simple danger alert—check it out! </div> <div role="alert"> A simple warning alert—check it out! </div> <div role="alert"> A simple info alert—check it out! </div> <div role="alert"> A simple light alert—check it out! </div> <div role="alert"> A simple dark alert—check it out! </div> <button type="button">Primary</button> <button type="button">Secondary</button> <button type="button">成功</button> <button type="button">失败</button> <button type="button">警告</button> <button type="button">信息</button> <button type="button">Light</button> <button type="button">Dark</button> <button type="button">Link</button> </div>
当然，记得在index.html中加入link的占位符，以便上面的applyTheme方法能够找到它：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Nblogger</title> <base href="https://www.jb51.net/" > <meta content="width=device-width, initial-scale=1"> <link type="image/x-icon" href="https://www.jb51.net/favicon.ico" > <link type="text/css" href="#" > </head> <body> <app-root></app-root> </body> </html>
总结
我们可以将Bootswatch的所有主题下载到本地，由本地服务来提供主题的API，这样切换主题会变得更快，也可以自己自定义主题然后扩展这个自制的本地API来提供更丰富的主题，根据需要来定吧。