Angular 2-如何基于URL queryparams动态更改整个CSS样式表 [英] Angular 2 - How to dynamically change an entire CSS stylesheet based on URL queryparams

问题描述

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

I'm very new to the world of Angular (loving it so far). We have an Angular 1 (JS) app that we plan to convert to the latest Angular 2 (8.3.9) version. One thing that was done in the old app, was make use of the $scope object, and then set the CSS stylesheet link in the root index.html dynamically based on a query parameter in the requesting URL.

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

Using ngStyle or ngClass to update indiviudal elements in a document it cool, but,

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

How do we handle changing the entire style sheets on loading the app in Angular 2?

所有内容都封装在组件内部，并且在angular.json文件中指定的样式内置在"deployable.js"文件中.是否可以在运行时更改它?

Everything is encapsulated inside the component, and styles specified in the angular.json file are built into the "deployable.js" file. Is it possible to change it at runtime?

此链接似乎是最接近的示例:基于角度变量生成动态css ，但仍不能完全解决根index.html文件中的问题.

This link appears to be the closest example: Generate dynamic css based on variables angular , but still doesn't quite solve the problem at the root index.html file.

当前的旧版本

网址到达:

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

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

css query param is pulled into a global variable and stored on scope called css_url, In index.html (starting page)

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

，应用开始使用此链接提供的任何样式表.

and the app starts using whatever style sheet this link provides.

新Angular 2(版本8.3.9)

The NEW Angular 2 (version 8.3.9)

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

We want to mimic the above behavior that we were able to achieve in the JS version. Pull a URL from a QueryParam pointing to some CSS file, and that CSS URL can be injected into the main index.html to change the entire apps styles in one go, or dynamically access the style-sheet in code to update everything in one go.

简而言之，我们希望有一个应用可以通过一个基于queryparam的CSS文件设置样式.

In short, we want 1 app that can be styled by a CSS file, based off a queryparam.

所有想法和评论将不胜感激.

All thoughts and comments will be greatly appreciated.

推荐答案

经过大量挖掘，终于找到了我想要的解决方案.太简单了，希望这对可能需要做同样事情的其他人有所帮助.

After a lot of digging around, finally found the solution I was looking for. And it was so straight forward, hope this helps others that might be needing to do the same thing..

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

Get the css path from query params and then Inject the Document into a TS file... append the link to the head of the document.

我使用canActivate在Router Guard中进行了此操作.我从routerstatesnpshot获得了查询参数，如下所示:

I did this in a Router Guard using canActivate. I got the query param from the routerstatesnpshot like so:

在构造函数中注入DOCUMENT(不要忘记导入)

Inject the DOCUMENT( don't forget the import) in the constructor

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/动态加载css-angular-cli/

这篇关于Angular 2-如何基于URL queryparams动态更改整个CSS样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！