angular2中一种换肤实现方案
生活随笔
收集整理的這篇文章主要介紹了
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中一种换肤实现方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【报告分享】2021中国二手车金融与生态
- 下一篇： css鼠标移入，div边框显示阴影效果