Question

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

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

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

在Angular tutorial中，解释了如何向模板添加样式，如果模板在@Component装饰器中被定义为字符串，但是如果模板是HTML文件，我没有找到任何信息。

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

Answer 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的一部分，我在这里添加了它，因为我花了几分钟才找到它。

如何动态添加样式到Angular 2组件

1 个答案: