成都网站建设设计

将想法与焦点和您一起共享

基于Angular8和Bootstrap4实现动态主题切换的示例代码-创新互联

效果

辽阳ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!

首先看看效果:

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

设计

遵循Bootstrap的设计,我们会使用 bootswatch.com 提供的免费主题来实现上面的效果。Bootswatch为前端程序员提供了多达21种免费的Bootstrap主题,并且提供了API文档 和 实例页面 ,介绍如何在HTML+jQuery的环境中实现主题切换。其实,我们也可以使用Bootstrap官网提供的主题设计工具来设计自己的主题,这些自定义的主题也是可以用在本文介绍的方法里的,只需要替换相关的资源地址就可以。如果你打开Bootswatch的API,你就会看到各种主题的元数据信息,我们可以使用其中的cssMin链接来替换主页的link地址,以达到切换主题的目的。

在开工之前,还是要做一些粗略的设计。为了简单起见,我使用Bootstrap的Navbar来完成这个功能,因为Navbar的代码可以直接从Bootstrap官网拷贝过来,稍微改改就行。不同的是,我将Navbar封装在一个组件(Component)里,这样做的好处是,可以将切换主题的功能封装起来,以实现模块化的设计。下图展示了这一设计:

基本流程如下:

  • 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[];
}

当前标题:基于Angular8和Bootstrap4实现动态主题切换的示例代码-创新互联
标题链接:http://chengdu.cdxwcx.cn/article/ddoede.html