css - 如何将来自 ajax 查询的固定 CSS 文本添加到 Angular 2 应用程序？

Question

如何将从后端返回的 CSS 文本 block 插入到我的组件中？

我尝试使用 DOMSanitizer 的 bypassSecurityTrustHtml，但尽管 html 没问题，但任何样式标签都被转义了。

例子:

import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

@Component({
  selector: 'the-app',
  template: `
     <div [innerHtml]="myHtml"></div>
  `,
})
export class App {
  constructor(private sanitizer: DomSanitizer) {
    // the text would actually be from the database...
    this.myHtml = sanitizer.bypassSecurityTrustHtml('<div><style>.myClass{color: red;}</style><div>THIS SHOWS FINE</div></div>') ;
  }
}

Answer 1

我发现这个有效。不过，我发现它与我原来的帖子中发生的转义奇怪地不一致。

import {Renderer, OnInit} from '@angular/core'
import {BrowserModule, DomSanitizer} from '@angular/platform-browser'

@Component({
  selector: 'the-app',
  template: `
     <div #myRef></div>
     <div class=".junkClass">MAKE ME BLUE</div>
  `,
})
export class App implements OnInit {
    @ViewChild('myRef') myReference: ElementRef;
    constructor(private renderer: Renderer) {

    }
    ngOnInit() {
        let tempElement = this.renderer.createElement(this.myReference.nativeElement, 'div');
        tempElement.innerHTML = '<style type="text/css">.junkClass { color: blue;}</style>';

    }
}