小编Cra*_*gSS的帖子

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

我对 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
Run Code Online (Sandbox Code Playgroud)

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

<link rel="stylesheet" ng-href="{{css_url}}">
Run Code Online (Sandbox Code Playgroud)

并且应用程序开始使用此链接提供的任何样式表。

新的 Angular 2(版本 8.3.9)

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

简而言之,我们想要 1 个可以基于查询参数通过 CSS 文件设置样式的应用程序。

所有的想法和意见将不胜感激。

javascript css dynamic angular

5
推荐指数
1
解决办法
4317
查看次数

标签 统计

angular ×1

css ×1

dynamic ×1

javascript ×1