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'
angular2中一种换肤实现方案的更多相关文章
- 在WPF中创建可换肤的用户界面
原文:在WPF中创建可换肤的用户界面 在WPF中创建可换肤的用户界面. ...
- Android App插件式换肤实现方案
背景 目前很多app都具有换肤功能,用户可以根据需要切换不同的皮肤,为使我们的App支持换肤功能,给用户提供更好的体验,在这里对换肤原理进行研究总结,并选择一个合适的换肤解决方案. 换肤介绍 App换 ...
- VC6.0中MFC界面换肤简例
利用VC中的MFC进行界面设计时,发现界面上的各控件无法简易地进行调整,比如字体大小.颜色.格式等. 为了改变外观,小小地美化一下,今天决定动手一试. 网上提供的库和方法不计其数,我选择了SkinMa ...
- iOS开发--换肤简单实现以及工具类的抽取
一.根据美工提供的图片,可以有两种换肤的方案. <1>美工提供图片的类型一: <2>美工提供图片的类型二:这种分了文件夹文件名都一样的情况,拖入项目后最后用真实文件夹(蓝色文件 ...
- Android可更换布局的换肤方案
换肤,顾名思义,就是对应用中的视觉元素进行更新,呈现新的显示效果.一般来说,换肤的时候只是更新UI上使用的资源,如颜色,图片,字体等等.本文介绍一种笔者自己使用的基于布局的Android换肤方案,不仅 ...
- 节日换肤通用技术方案__iOS端实现
一.问题的提出 不知道大家有没有发现, 元旦期间, 很多APP界面里的图标都换成了具有节日气氛的样式, 而在过了元旦节之后, 这些图标又悄无声息的变回了本来的面貌. 这些具有短暂生命周期.而又必须在固 ...
- Android 换肤功能的实现（Apk插件方式）
一.概述 由于Android 没有提供一套统一的换肤机制,我猜可能是因为国外更注重功能和体验的原因 所以国内如果要做一个漂亮的换肤方案,需要自己去实现. 目前换肤的方法大概有三种方案: (1)把皮肤资 ...
- C# 实现对窗体（Form）换肤
http://www.csharpwin.com/csharpresource/2992.shtml 一直想写一个比较完整的.容易扩展的窗体换肤的方案,由于时间问题,都没去实现这个想法.现在有朋友提出 ...
- qt之窗口换肤（一个qss的坑：当类属性发现变化时需要重置qss，使用rcc资源文件）
1.相关文章 Qt 资源系统qt的moc,uic,rcc命令的使用 2.概要 毕业两年了,一直使用的是qt界面库来开发程序,使用过vs08.10.13等开发工具,并安装了qt的插件,最近在做客户 ...
随机推荐
- C# a == b ? c :d 表示的意思
a==b 为true,这个表达式返回c; a==b为false,这个表达式返回d. 相当于: if(a == b) { return c; } else { return d; }
- Android微信开放平台,申请移动应用的 应用签名 如何获取
在微信开放平台,申请移动应用的时候: https://open.weixin.qq.com/cgi-bin/appcreate?t=manage/createMobile&type=app&a ...
- PHP用mysql数据库存储session
大部分使用php的人一旦应用到session都会使用cookie. cookie虽好可是它也会给我们带来一些隐患的. 隐患一:如果客户端机器的cookie一旦因病毒而失效了,那么session也就相当 ...
- PHP的htmlspecialchars、strip_tags、addslashes解释
第一个函数:strip_tags,去掉 HTML 及 PHP 的标记 注意:本函数可去掉字串中包含的任何 HTML 及 PHP 的标记字串.若是字串的 HTML 及 PHP 标签原来就有错,例如少了大 ...
- pop协议，邮件密码嗅探 使用说明
思路与源代码 可以查看 https://www.cnblogs.com/likehc/p/10140174.html 因为软件用的是Wincap,所以 第一步安装下 WinPcap 第二步,打开 sn ...
- 将BufferedImage转换为InputStream,亲测可用
private static final Logger logger = Logger.getLogger(Demo.class); /** * 将BufferedImage转换为InputStrea ...
- css 两大特性:继承性和层叠性
css 有两大特性: 继承性和层叠性, 继承性 面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我们仅仅继承属 ...
- Django实战-用户注册和登陆系统
1.环境搭建和创建项目 1.环境搭建 每当我们开始一个新项目的时候,通常都会搭建一个全新.独立.隔离的项目环境,这样做的好处自然不必多说.有很多种建立项目虚拟环境的工具,使用比较普遍的是Python中 ...
- 洛谷P3372 【模板】线段树 1(树状数组)
题意 题目链接 Sol Get到了这题树状数组的做法,感觉非常nice 区间加:直接差分 区间求和:考虑每一位的贡献 \(sum_{i = 1}^x (x+1 - i) d_i\) \(= sum_{ ...
- easyui datagrid 表格中操作栏 按钮图标不显示
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染 解决办法: 使用解析器 Parser(解析器) $.parser.parse(); // 解析所有页面 $.par ...