如何为Angular 2组件动态添加样式答案

【问题标题】：How to dynamically add styles to Angular 2 component如何为Angular 2组件动态添加样式
【发布时间】：2023-03-30 11:09:01
【问题描述】：

我怎样才能添加这样的东西：

<style>
    {{customStyles()}}
</style>

样式标签正在从模板中删除。最初是未知的，哪种样式将应用于哪个元素。

在Angular tutorial 中解释了如何向模板添加样式，如果模板在@Component 装饰器中定义为字符串，但我没有发现如果模板是 HTML 文件该怎么办。

在Angular Create Style Tag in View Template? 中给出了一个hack，而不是一个框架工具，因此它没有回答这个问题。

【问题讨论】：

模板在另一个 HTML 文件中或作为字符串绝对没有区别。这部分与您的问题无关，IMO。
@Pac0 style 标签正在从模板中删除
看看：stackoverflow.com/questions/40676203/…
@Pac0 我需要使用style 标记，而不是设置特定标记的样式
@Pac0 谢谢，确实合适

标签： css angular

【解决方案1】：

您可以使用 DomSanitizer 绕过 Angular 限制：

@Component({
  template: `<div [innerHTML]="styles"></div>`
})
export class OutputStyleTagComponent implements OnInit {
  public styles: SafeHtml;

  constructor(
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit() {
    this.styles = this.sanitizer.bypassSecurityTrustHtml(`
      <style>
       .my-styles {
         ...
       }
      </style>
    `);
  }
}

这个答案是this other question/answer 的摘录，我在这里添加了它，因为我花了几分钟才找到它。

【讨论】：