思路:整體思路是準備多套不同主題的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'