如何在Angular 2中更改應用程序的寬CSS？

在我的應用程序中，我有不同的CSS文件，如fire.css，lake.css，每個CSS文件都有不同的外觀以完成應用程序。如何在Angular 2中更改應用程序的寬CSS？

目前，我只有1個文件的main.css實施，並將此文件
的index.html

<link rel="stylesheet" href="resources/styles/main.css"> 
<link rel="stylesheet" href="resources/styles/themes.css"> 
<link rel="stylesheet" href="resources/styles/common.css"> 
<link rel="stylesheet" href="resources/styles/plugins.css">

現在我想要動態地改變這個作爲用戶從下拉列表中選擇。

我的想法：將所有css文件複製到應用程序文件夾並在其中添加主題。
文件夾結構

應用
| ----- app.component.ts
| ----- app.routes.ts
| ----- main.css的
| - --- lake.css
| -----登錄
| -----其它組件...

我加入的CSS styleUrls在app.components.ts應用程序組件現在是

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

@Component({ 

    selector: 'workshop-app',  
    template: ` 
     <body> 
      <router-outlet></router-outlet> 
     </body> 
    `, 
    directives : [ ROUTER_DIRECTIVES ], 
    styleUrls : ['app/lake.css'] 
}) 
export class AppComponent { }

將Lake.css文件中的內容添加到樣式標記下，但未對應用進行更改。

來源

2016-08-05 Sandeep Chikhale

http://stackoverflow.com/a/36566111/2703334也許這會有幫助。 –

它添加到app.component.html

<head> 
<link id="theme" rel='stylesheet' href='demo.css'>  
</head>

此項添加到app.component.ts

import { Component, Inject } from '@angular/core'; 
import { DOCUMENT } from '@angular/platform-browser';  
constructor (@Inject(DOCUMENT) private document) { } 
ngOnInit() { 
    this.document.getElementById('theme').setAttribute('href', 'demo2.css'); 
}

來源

2016-09-14 10:20:26

我試過了，它工作！ –

好答案!!!項目沒有提供這個功能，我會在空閒時間嘗試。 –

高興地幫助你，祝你好運 –

如何在Angular 2中更改應用程序的寬CSS？

回答

相關問題