欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-18 08:16:52
效果首先看看效果:本文将介绍如何基于angular 8和bootstrap 4来实现上面的主题切换效果。设计遵循bootstrap的设计,我们会使用 提供的免费主题来实现上面的效果。bootswatc...

效果

首先看看效果:

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

本文将介绍如何基于angular 8和bootstrap 4来实现上面的主题切换效果。

设计

遵循bootstrap的设计,我们会使用 提供的免费主题来实现上面的效果。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来提供更丰富的主题,根据需要来定吧。

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