如何在Angular 2中更改应用范围的CSS? [英] How to change app wide css in Angular 2?
问题描述
在我的应用程序中，我有不同的CSS文件，例如fire.css，lake.css，每个文件都具有不同的外观以完成应用程序.
In my application I have different CSS file like fire.css, lake.css each giving different look to complete application.
当前，我仅使用1个文件main.css来实现，并将此文件添加到
index.html
Currently, I implemented with only 1 file main.css and added this file to
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">
现在，我想随着用户从下拉列表中进行选择来动态更改此内容.
Now I wanted to change this dynamically as user select from the drop-down list.
我的想法:
将所有css文件复制到app文件夹，然后在其中添加主题.
文件夹结构为
My Idea:
Copy all css files to app folder and add themes there.
Folder structure is
app
| ----- app.component.ts
| ----- app.routes.ts
| ----- main.css
| ----- lake.css
| -----登录
| -----其他组件...
app
|-----app.component.ts
|-----app.routes.ts
|-----main.css
|-----lake.css
|-----Login
|-----Other Components...
我在 app.components.ts 中的styleUrls中添加了CSS，现在应用程序组件是
I added css to styleUrls in app.components.ts App component now is
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文件中的内容被添加到样式标签下，但未在应用中进行更改.
Contents from Lake.css file is added to style tag under but not making changes in the app.
推荐答案
将此添加到app.component.html
add this to the app.component.html
<head>
<link id="theme" rel='stylesheet' href='demo.css'>
</head>
将此添加到app.component.ts
add this to 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');
}
这篇关于如何在Angular 2中更改应用范围的CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
