javascript Angular -在运行时动态注入包css文件用于主题化

bq9c1y66 于 2023-03-21 发布在 Java

关注(0)|答案(1)|浏览(134)

我使用的npm包有几个主题。假设它是一个表视图包。
我想在管理面板上设置这个主题。如果管理员希望表以暗模式显示。当它在设置页面上更改时，我希望将该specific.css文件注入表组件。我找到了一个解决方案，我通过阅读设置数据注入表组件通过我的API，但它感觉不好。
有没有办法在运行时注入主题css文件在/node-modules/theme/light. css和dark.css，而不将它们注入到文档头的init方法。我找不到任何方法。
顺便说一句，我在项目中使用了scss。
Load css file dynamically for theming我找到了一个类似于这里的解决方案，但我想将主题分配给全局变量并相应地执行操作。我想在加载页面之前通过获取设置变量来渲染，而不使用Document。
我可以通过SettingsService在Init上延迟加载时更改主题，但我不确定这是最佳实践

JavaScript

来源：https://stackoverflow.com/questions/75789317/angular-dynamically-inject-package-css-files-on-runtime-for-theming

1条答案

按热度按时间

k97glaaz1#

下面是一个如何在Angular组件中动态注入CSS文件的示例：
1.创建一个link元素，将rel属性设置为stylesheet，href属性指向要加载的CSS文件：

const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'path/to/your/css/file.css';

2)从文档中检索head元素：

const head = document.getElementsByTagName('head')[0];

1.将link元素附加到head元素：

head.appendChild(link);

您可以将此代码放在组件的ngOnInit方法中，以便在组件初始化时加载CSS文件。您还可以将此代码放在服务中，并将服务注入到组件中，以便从中心位置加载CSS文件。

赞(0）回复(0）举报 2023-03-21

我来回答

javascript Angular -在运行时动态注入包css文件用于主题化

1条答案

相关问题

热门标签

最新问答