基于Angular 8和Bootstrap 4实现动态主题切换的示例代码


Posted in Javascript onFebruary 11, 2020

效果

首先看看效果:

基于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)里,这样做的好处是,可以将切换主题的功能封装起来,以实现模块化的设计。下图展示了这一设计:

基于Angular 8和Bootstrap 4实现动态主题切换的示例代码

基本流程如下:

  • 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来提供更丰富的主题,根据需要来定吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
原生js实现点击轮播切换图片
Feb 11 #Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 #Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 #Javascript
JS+DIV实现拖动效果
Feb 11 #Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 #Javascript
原生js拖拽实现图形伸缩效果
Feb 10 #Javascript
js实现单元格拖拽效果
Feb 10 #Javascript
You might like
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
python使用pil生成缩略图的方法
2015/03/26 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python中的变量和作用域详解
2016/07/13 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
企业后勤岗位职责
2014/02/28 职场文书
欢迎标语大全
2014/06/21 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
昆虫记读书笔记
2015/06/26 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
图解上海144收音机
2021/04/22 无线电