效果
首先看看效果：
本文将介绍如何基于angular 8和bootstrap 4来实现上面的主题切换效果。
设计
遵循bootstrap的设计，我们会使用 提供的免费主题来实现上面的效果。bootswatch为前端程序员提供了多达21种免费的bootstrap主题，并且提供了api文档 和 ，介绍如何在html+jquery的环境中实现主题切换。其实，我们也可以使用bootstrap官网提供的主题设计工具来设计自己的主题，这些自定义的主题也是可以用在本文介绍的方法里的，只需要替换相关的资源地址就可以。如果你打开bootswatch的api，你就会看到各种主题的元数据信息，我们可以使用其中的cssmin链接来替换主页的link地址，以达到切换主题的目的。
在开工之前，还是要做一些粗略的设计。为了简单起见，我使用bootstrap的navbar来完成这个功能，因为navbar的代码可以直接从bootstrap官网拷贝过来，稍微改改就行。不同的是，我将navbar封装在一个组件（component）里，这样做的好处是，可以将切换主题的功能封装起来，以实现模块化的设计。下图展示了这一设计：
基本流程如下：
步骤
首先，根据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>
当然，记得在中加入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来提供更丰富的主题，根据需要来定吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论