gpt4 book ai didi

css - 如何在 Angular 2 中更改应用程序范围的 css?

转载 作者:行者123 更新时间:2023-11-28 11:04:54 26 4
gpt4 key购买 nike

在我的应用程序中,我有不同的 CSS 文件,如 fire.css、lake.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 文件夹并在那里添加主题。
文件夹结构为

应用程序
|-----app.component.ts
|-----app.routes.ts
|-----main.css
|-----lake.css
|-----登录
|-----其他组件...

我在 app.components.ts App 组件的 styleUrls 中添加了 css

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 文件中的内容被添加到 style 标签下,但未在应用程序中进行更改。

最佳答案

将此添加到 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');
}

关于css - 如何在 Angular 2 中更改应用程序范围的 css?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38794824/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com