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的插件,最近在做客户 ...

随机推荐

jemeter排至数据库时报：Access denied for user 'root'@'localhost' (using password:YES) 解决方案
相信这个问题大部分人都遇到过,至少我遇到过三次了,而且每次原因都不一样,前段时间同学也遇到这个问题,问我怎么解决,我把我的解决思路都说了一遍,发现还不行,最后居然是另外一个原因...哎,说多了都是泪, ...
CSS选择器笔记，element element和element > element 的区别
看官方解释 element element 例子: div p 官方解释:div内部所有的p元素就是说只要p在div内部.如果 p在span内部,span在div内部,p也算在div内部 < ...
[PHP]对象数组和普通数组总结
1.碰到前台将JSON格式数据传递到服务器后台,经php的json_decode函数转换成的数组由于为对象数组,php程序无法对数据进行正常处理的情况,为此需要开发一个PHP回调函数(objarray ...
二叉查找树的C语言实现（二）
接着上次的话题.这次我们要讨论,二叉查找树的中序遍历和后序遍历(递归和非递归),另外还有先序遍历(非递归) 1.中序遍历(递归) static void __in_order(struct bnode ...
NOPI导出execl 多个sheet,一列图片
NPOI API: http://www.cnblogs.com/atao/archive/2009/11/15/1603528.html http://blog.csdn.net/pan_junbi ...
css的三个特性背景透明设置
关于行内元素(补充一点) 行内元素只能容纳文本或其他行内元素.(a特殊a里面可以放块级元素) 例子: 关于行高tip: 选择器的嵌套层级不应大于3级,位置靠后的限定条件应尽可能的精确. 属性定义必须另 ...
学习html5 app项目开发
这周因为部门接了个小的html5 app case,所以从事android开发的我就接下了这个项目.与其说是项目需要,其实更大部分是我自己想要做html5 app,因为我对这个全新的平台已经好奇很久了 ...
vos语音业务规范操作承诺函
语音业务规范操作承诺函 *****网络科技有限公司: 我司开通固话2000线,话务价格为0.045元/分钟(仅拨打中国移动网内电话).为防止投诉.网外电话.欠费等语音话务风险,我司承诺如下:在业务上遵 ...
CentOS7.3下关于DHCP中继代理服务器的详细配置
DHCP服务器只作用于局域网同一网段内,客户端是通过广播消息来获得DHCP服务器响应后才能得到IP地址的,但广播消息不能跨越子网,那么如何让客户端获取到DHCP服务器提供的IP地址呢?这就是DHCP中 ...
DEEP LEARNING 大满贯课程表
Reinforcement Learning post by ISH GIRWAN Courses/Tutorials Deep Reinforcement Learning, Spring 2017 ...

angular2中一种换肤实现方案

angular2中一种换肤实现方案的更多相关文章

随机推荐

热门专题