javascript - Angular 2 - 如何根据 URL 查询参数动态更改整个 CSS 样式表

Question

我对 Angular 的世界还很陌生(到目前为止我很喜欢它)。我们有一个 Angular 1 (JS) 应用程序，我们计划将其转换为最新的 Angular 2 (8.3.9) 版本。在旧应用程序中完成的一件事是使用 $scope 对象，然后根据请求 URL 中的查询参数动态设置根 index.html 中的 CSS 样式表链接。

使用 ngStyle 或 ngClass 更新文档中的单个元素很酷，但是，

我们如何处理在 Angular 2 中加载应用程序时更改整个样式表？

所有内容都封装在组件内，angular.json 文件中指定的样式内置到“deployable.js”文件中。是否可以在运行时更改它？

此链接似乎是最接近的示例: Generate dynamic css based on variables angular, 但仍然没有完全解决根 index.html 文件中的问题。

当前的旧版本

网址到达:

http://someserver:port/app?css=http://linktoCSs/cssFile.css

css 查询参数被拉入一个全局变量并存储在名为 css_url 的范围内，在index.html(起始页)

<link rel="stylesheet" ng-href="{{css_url}}">

然后应用开始使用此链接提供的任何样式表。

新的 Angular 2(8.3.9 版)

我们想模仿我们能够在 JS 版本中实现的上述行为。从 QueryParam 中提取一个指向某个 CSS 文件的 URL，然后可以将该 CSS URL 注入(inject)到主 index.html 中以一次性更改整个应用程序样式，或者动态访问代码中的样式表以一次性更新所有内容.

简而言之，我们想要一个可以根据查询参数通过 CSS 文件设置样式的应用。

我们将不胜感激所有的想法和评论。

Answer 1

经过大量的挖掘，终于找到了我正在寻找的解决方案。它是如此直接，希望这能帮助其他可能需要做同样事情的人..

从查询参数中获取 css 路径，然后将文档注入(inject)到 TS 文件中...将链接附加到文档的头部。

我在 Router Guard 中使用 canActivate 做到了这一点。我像这样从 routerstatesnpshot 得到了查询参数:

在构造函数中注入(inject)文档(不要忘记导入)

http://server.com/xxx&broker=1&client=2&css=http://cssServer.com/my_dynamic_stylesheet.css

   import { DOCUMENT } from '@angular/common';

   @Inject(DOCUMENT) private document: Document

   this.setDynamicStyle(state.root.queryParamMap.get('css'));

    setDynamicStyle(cssURL: string) {
        const head = this.document.getElementsByTagName('head')[0];
        const style = this.document.createElement('link');
        style.id = 'css-styling';
        style.rel = 'stylesheet';
        style.href = `${cssURL}`;
        head.appendChild(style);
    }

感谢: https://juristr.com/blog/2019/08/dynamically-load-css-angular-cli/