angular2：如何按条件手动将css文件添加到index.html？

Posted 2023-03-06

【中文标题】angular2：如何按条件手动将css文件添加到index.html？

【英文标题】：angular2: how to manually add css files by condition to index.html?

【发布时间】：2017-08-07 01:26:55

【问题描述】：

下面的代码是样式的定义。

<!-- for mobile -->
<link rel="stylesheet" href="/dist/css/mobile.css">

<!-- for desktop -->    
<link rel="stylesheet" href="/dist/css/desktop.css">

我想按条件将上述文件添加到'src/index.html'中的

中。

如何为每个设备应用一个 css 文件？

如你所知，我不能在“index.html”中使用“条件”代码。

注意，我不会使用下面的方法。

// in angular-cli.json
"apps": [
    
        "root": "src",
        "index": "index.html",
        "styles": [
            "/dist/css/mobile.css",
            "/dist/css/desktop.css"
        ]
    
]


// in component.ts
@Component(
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrl: '/dist/css/mobile.css'
)

期待您的建议。

谢谢。

【参考方案1】：

要动态加载或更改 CSS，您可以执行以下操作：

在 index.html 中：

您将获得如下样式表链接：

<link id="theme" href="assets/light.css" rel="stylesheet" >

请注意，链接元素有“id”。

在您的组件中，您将拥有以下内容：

从平台浏览器导入文档

import DOCUMENT from "@angular/platform-browser";

然后，在您的操作或初始化时，您将相应地更改您的 css：

this.document.getElementById('theme').setAttribute('href','assets/dark.css');

默认情况下，您将加载一个 CSS 文件.. 比如说 desktop.css。在应用程序的根组件中，您可以查找设备或 cookie 或设置一些条件以从 desktop.css 更改为 mobile.css。就像你说的，你不会使用 angular-cli.json 来加载你的 CSS。

【讨论】：

非常感谢！

@nasangW 如果答案对您有帮助，为什么不将其标记为正确答案以真正帮助其他寻找相同答案的人知道这是正确的答案？

document.getElementById('theme').setAttribute('href','assets/dark.css');

DOCUMENT 现在是从 @angular/common 导入的。上面的 import 语句已被弃用。