Angular将样式标签添加到innerHTML

Question

我创建了一个 Angular 项目，我想在 html 中插入 style CSS，但我不希望插入的 CSS 替换具有相同标签或类名的其他样式。

const testStyle = '<style>
  body {color: red}
  table {width : 200px}
  h1{font-size:12px}
  .another-same-class-name{color: blue;font-size: 13px}
</style>'

上面是我想要插入到组件模板中的示例样式

我的组件

@Component({

   selector : 'app-my-component',
   templateUrl: './my-template.component.html',
   styleUrls: ['./my-style.component.scss'],

})

export class MyComponent{

  myStyle:string

  ...

  ngOnInit(){
    const testStyle = '<style>
                         body {color: red}
                         table {width : 200px}
                         h1{font-size:12px}
                        .another-same-class-name{color: blue;font-size: 13px}
                      </style>'

    this.myStyle = testStyle

  }


  updateCss(newCss){
    this.myStyle = `<style>${newCss}</style>`
  }


}


<div #styleWillGoHere [innerHtml]="myStyle"></div>

编辑：我已经更新了我的问题，让它更清楚:)

我很欣赏任何类型的解决方案。

Answer 1

您需要使用 @angular/platform-browser 的 DomSanitizer 来清理 HTML。
查看文档：https://angular.io/api/platform-browser/DomSanitizer。

在您的特定情况下，您需要使用bypassSecurityTrustHtml() 方法。此外，对于仅将样式应用到一个组件，请将id 添加到您的目标组件并在您的样式中使用它。 （如果该组件在您的网络中出现多次，您可以使用类）。

示例：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `
      <div id="myId">
          <div [innerHtml]="myStyle"></div>
          <h1>Hello</h1>
      </div>
  `
})
export class AppComponent {
  myStyle: SafeHtml;

  constructor(private _sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.myStyle =
      this._sanitizer.bypassSecurityTrustHtml(`<style>#myId h1{color: red}</style>`);
  }
}

演示： https://stackblitz.com/edit/angular-3kza7c?file=src%2Fapp%2Fapp.component.ts