angular2中一种换肤实现方案

思路：整体思路是准备多套不同主题的css样式。在anguar项目启动时，首先加载的index.html中先引入一套默认的样式。当我们页面有动作时再切换css. 可以通过url传参触发，也可以通过button触发。下面演示的是url传参切换。button同理，只要调用有同的方法触发就行。

首先，index.html

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>CMDB Front</title><base href="./"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><!--下面两行是引入换肤的css样式--><link href="assets/skin/css/classic.css" rel="stylesheet" type="text/css"><link id="skin" rel="stylesheet" type="text/css"></head>
<body><app-root><div style=" display: flex;justify-content: center;align-items: center;height: 100vh;color: #DDDDDD;text-transform: uppercase;font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;font-size: 2.5em;text-shadow: 2px 2px 10px rgba(0,0,0,0.2);background: white;margin: 0;padding: 0;">Loading<span >.</span><span >.</span><span >.</span></div></app-root></body>
</html>

第二步是在根组件app.component.ts中接收url参数

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {SkinService} from "./shared/SkinService";@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{public dataSkin:any; //接收路由传参的皮肤参数title = 'app';constructor(public activeRoute:ActivatedRoute,public skinService:SkinService) { }ngOnInit(){this.activeRoute.queryParams.subscribe(params=>{this.dataSkin=params['defaultTheme'];console.log("######",this.dataSkin)if(this.dataSkin =='gwjd'){this.skinService.showStyleOne(this.dataSkin);//国网经典主题return;}if(this.dataSkin=='classic'){this.skinService.showStyleTwo(this.dataSkin); //默认主题return;}if(this.dataSkin=='hhyz'){this.skinService.showStyleThree(this.dataSkin); //浩瀚宇宙主题return;}if(this.dataSkin=='kjzg'){this.skinService.showStyleFour(this.dataSkin); //科技之光主题return;}if(this.dataSkin=='lscs'){this.skinService.showStyleFive(this.dataSkin); //绿色城市主题return;}if(this.dataSkin=='rqpb'){this.skinService.showStyleSix(this.dataSkin); //热情拼搏主题return;}else{this.skinService.showStyleDefault(); //如果路由里没有携带皮肤参数，显示默认皮肤。
      }});}
}

其次是skinService做的cookie处理。

import {Injectable} from "@angular/core";
/*** Created by zhengxiaoya on 2018/6/11 13:28.*/
@Injectable()
export class SkinService {constructor(){}showStyleOne(skin){var Days = 30;var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*60*1000);// 获取到样式1的id.//  var StyleOneId=document.getElementById('u2923').id;var StyleOneId=skin;console.log("######a",StyleOneId);// 把每次点击切换后的皮肤值存在cookie中document.cookie="skinId="+(StyleOneId) +"; expires=" + exp.toDateString();// add selected$("#"+StyleOneId).addClass("selected").siblings().removeClass("selected");$('#skin').attr("href","assets/skin/css/"+(StyleOneId)+".css");}showStyleTwo(skin){var Days = 30;var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*60*1000);// 获取到样式1的id.// var StyleTwoId=document.getElementById('u2924').id;var StyleTwoId=skin;console.log("StyleTwoId",StyleTwoId);// 把每次点击切换后的皮肤值存在cookie中document.cookie="skinId="+(StyleTwoId) +"; expires=" + exp.toDateString();$('#skin').attr("href","assets/skin/css/"+(StyleTwoId)+".css");}showStyleThree(skin){var Days = 30;var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*60*1000);// 获取到样式1的id.// var StyleThreeId=document.getElementById('u2933').id;var StyleThreeId=skin;console.log("StyleThreeId",StyleThreeId);// 把每次点击切换后的皮肤值存在cookie中document.cookie="skinId="+(StyleThreeId) +"; expires=" + exp.toDateString();$('#skin').attr("href","assets/skin/css/"+(StyleThreeId)+".css");}showStyleFour(skin){var Days = 30;var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*60*1000);// 获取到样式1的id.// var StyleThreeId=document.getElementById('u2933').id;var showStyleFour=skin;console.log("StyleThreeId",showStyleFour);// 把每次点击切换后的皮肤值存在cookie中document.cookie="skinId="+(showStyleFour) +"; expires=" + exp.toDateString();$('#skin').attr("href","assets/skin/css/"+(showStyleFour)+".css");}showStyleFive(skin){var Days = 30;var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*60*1000);// 获取到样式1的id.// var StyleThreeId=document.getElementById('u2933').id;var showStyleFive=skin;console.log("StyleThreeId",showStyleFive);// 把每次点击切换后的皮肤值存在cookie中document.cookie="skinId="+(showStyleFive) +"; expires=" + exp.toDateString();$('#skin').attr("href","assets/skin/css/"+(showStyleFive)+".css");}showStyleSix(skin){var Days = 30;var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*60*1000);// 获取到样式1的id.// var StyleThreeId=document.getElementById('u2933').id;var showStyleSix=skin;console.log("StyleThreeId",showStyleSix);// 把每次点击切换后的皮肤值存在cookie中document.cookie="skinId="+(showStyleSix) +"; expires=" + exp.toDateString();$('#skin').attr("href","assets/skin/css/"+(showStyleSix)+".css");}showStyleDefault(){var Days = 30;var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*60*1000);// 获取到样式1的id.// var StyleThreeId=document.getElementById('u2933').id;var StyleThreeId='classic';console.log("StyleThreeId",StyleThreeId);// 把每次点击切换后的皮肤值存在cookie中document.cookie="skinId="+(StyleThreeId) +"; expires=" + exp.toDateString();$('#skin').attr("href","assets/skin/css/"+(StyleThreeId)+".css");}
}

url传参：http://localhost:4200/?defaultTheme='gwjd'

转载于:https://www.cnblogs.com/javazxy/p/9353397.html

angular2中一种换肤实现方案相关推荐

换肤方案,换肤策略,App插件式换肤实现方案
UI换皮肤或白天黑夜模式,从产品上来看,是两种不同产品设计模式:白天黑夜模式只有两种模式:而换皮肤可以有多套,可以进行商业化,并盈利. 换肤的本质就是去替换资源文件.我们知道,Android应用程序由 ...
组件库自定义主题换肤实现方案
概述 douluo-ui 组件库是基于 element-ui 实现的,那么实现换肤分两步:一是 element-ui 的换肤方案:二是 douluo-ui组件库的换肤方案 element-ui 的 ...
在WPF中创建可换肤的用户界面
在WPF中创建可换肤的用户界面. 周银辉译 ...
几种换肤软件使用问题
几种换肤软件的使用和使用中的BUG ...
Android三种换肤方案原理及Demo
方案一:使用主题文件定义换肤资源在values/下新建一个xml文件,比如theme_attrs.xml,然后定义换肤的资源类型 <?xml version="1.0" ...
红橙Darren Android视频笔记自定义view的三个构造方法以及一种实现换肤的方案测量mode
红橙Darren Android视频笔记 import android.content.Context; import android.support.annotation.Nullable; imp ...
android view设置按钮颜色_Android 主题换肤技术方案分析
写在前面 Android TV 电视开发,主题换肤,我感觉有两种层级的方式,一种是系统级,另一种是应用级, 我记得很早在 Linux 桌面开发的时候,我们之前的公司在GTK+上也实现了一套换肤UI ...
Android 主题换肤技术方案分析
写在前面 Android TV 电视开发,主题换肤,我感觉有两种层级的方式,一种是系统级,另一种是应用级, 我记得很早在 Linux 桌面开发的时候,我们之前的公司在GTK+上也实现了一套换肤UI ...
Android 几种换肤方式和原理分析
1.通过Theme切换主题通过在setContentView之前设置Theme实现主题切换. 在styles.xml定义一个夜间主题和白天主题: <style name="Light ...

angular2中一种换肤实现方案

angular2中一种换肤实现方案相关推荐

最新文章

热门文章