使用 Angular 17 在应用程序运行时加载 CSS 文件

Question

我有一个要求，CDN 服务器上存在许多 CSS 文件并且可以公开访问。

我使用 Angular 17 构建的应用程序需要从其中一个查询参数读取一个值，然后使用 CSS 文件 URL 访问 CDN 服务器来加载 CSS 文件，以便可以根据应用程序 URL 中提供的 CSS 文件名渲染 UI查询参数。

我尝试了一些选项，例如使用组件

HttpClient

中的

ngOnInit

加载 CSS 文件，或使用

APP_INITIALIZER

方法。我可以加载 CSS 文件，但此 CSS 不适用于 html。

我在 AngularJS 中使用

实现了同样的效果

<link ng-hre="https://<cdn-server-domain>/{{cssFileName}}.css">

但无法在 Angular 中找到任何可行的解决方案。

请推荐。

Answer 1

Angular 会忽略应用程序中的

<link>

标签，因为样式通常应该是应用程序 CSS 文件的一部分。在你的情况下，这显然不起作用。但您可以动态创建标签并将其附加到 DOM。将其添加到您的

app.component.ts

：

ngOnInit() {
  const head = this.document.getElementsByTagName('head')[0];
  const link = document.createElement('link');
  link.href = ''; // apply your logic to generate the right link
  link.rel = 'stylesheet';
  head.appendChild(link);
}