如何在运行时在 Angular 组件中注入 CSS 样式表

Question

我需要在运行时将样式sheet 注入到组件中。基本上根据用户配置设置选择主题并根据活动主题 CSS url 更改。

通过 styelUrls 的静态注入对此不起作用，因为它在编译时是静态的。

直接将样式 link 注入到组件中似乎也不起作用:

<link [href]="themeLink" rel="stylesheet"  *ngIf="themeLink" />

我在这里尝试了一些变体 - 插值，使用 @import() 样式 - none 它似乎可以使用动态分配的值。

资源已添加到包含的资源中，如果我将上述 link 硬编码为特定样式，它就可以工作。但是在运行时设置值给我一个错误：

core.js:6228 ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

这很公平。

但我似乎找不到在运行时动态设置样式的方法sheet。

正确的做法是什么？

Answer 1

您可以借助 DomSanitizer 的 bypassSecurityTrustResourceUrl 方法禁用 Angular 清理来防止错误：

constructor(private sanitizer: DomSanitizer) {
  let themeUrl = "themes/" + appModel.configuration.theme + "/theme.css";
  this.themeLink = this.domSanitizer.bypassSecurityTrustResourceUrl(themeUrl);
}

如何在运行时在 Angular 组件中注入 CSS 样式表

How to inject a CSS StyleSheet at runtime in an Angular Component

css

angular-components

angular