exportclassThemeDefinition{
name:string;
description:string;
thumbnail:string;
preview:string;
css:string;
cssMin:string;
cssCdn:string;
scss:string;
scssVariables:string;
}

exportclassThemes{
version:String;
themes:ThemeDefinition[];
}

import{Injectable}from'@angular/core';
import{HttpClient}from'@angular/common/http';
import{Observable}from'rxjs';
import{Themes}from'../models/themes';

@Injectable({
providedIn:'root'
})
exportclassThemeService{

constructor(privatehttp:HttpClient){}

getThemes():Observable{
returnthis.http.get('https://bootswatch.com/api/4.json');
}
}

Home(current)


Link



主题


{{theme.name}}

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']
})
exportclassNavBarComponentimplementsOnInit{

@Input()themes:Themes;
@Input()selectedTheme:string;
@Output()themeSelectionChanged:EventEmitter=newEventEmitter();

constructor(privatethemeService:ThemeService){}

ngOnInit(){
}

onThemeItemSelected(event:any){
constselectedThemeName=event.target.text;
constselectedTheme=this.themes.themes.find(t=>t.name===selectedThemeName);
this.themeSelectionChanged.emit(selectedTheme);
}
}

在onThemeItemSelected事件处理函数中，会读取被点击dropdownitem的名称，根据该名称找到所选的主题，然后将其作为事件数据，发起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']
})
exportclassAppComponentimplementsOnInit{
title='nblogger';
themes:Themes;
selectedTheme:string;

constructor(privatethemeService:ThemeService,
privatestorage:StorageMap){

}

ngOnInit(){
this.themeService.getThemes()
.subscribe(data=>{
this.themes=data;
this.storage.get('app-theme-name').subscribe(name=>{
constthemeName=name?name:environment.defaultTheme;
constcurrentTheme=this.themes.themes.find(t=>t.name===themeName);
this.applyTheme(currentTheme);
});

});
}

onThemeSelectionChanged(event:ThemeDefinition){
this.applyTheme(event);
}

privateapplyTheme(def:ThemeDefinition):void{
this.storage.set('app-theme-name',def.name).subscribe(()=>{});
this.selectedTheme=def.name;
constlinks=document.getElementsByTagName('link');
for(leti=0;i
在applyTheme方法中，首先会将所选主题名称设置到LocalStorage中，以便下次打开页面的时候能够直接应用主题；然后，从当前document中找到所需的linktag，并将其href值替换为所选主题信息的cssMin链接地址（内容可以参考Bootswatch的API结果）以此完成主题替换。
当重新打开页面时，app.component.ts中的ngOnInit初始化方法会被首先调用，它会通过theme.service.ts来读取主题信息，之后判断LocalStorage中是否有已经设置好的主题。如果有，则使用该主题，否则就从environment.ts的默认值中选择主题名称进行设置。
app.component.ts所使用的template就比较简单，主体是对Navbar组件的引用，还可以加一些额外的HTML元素进行效果测试：



Heading1
Heading2
Heading3
Heading4


这是一个警告框