Question

我从HTTP调用中获取HTML代码块，其中具有内联样式。我将HTML块放在一个变量中并使用[innerHTML]将其插入到我的页面上，但是我看不到插入的HTML块中反映的样式。有没有人有任何建议如何实现这个目标？

@Component({
  selector: 'my-app',
  template: `
    <input type="text" [(ngModel)]="html">
    <div [innerHtml]="html">
    </div>
})
export class App {
  name:string;
  html: string;
  constructor() {
    this.name = 'Angular2'
    this.html = "<span style=\"color:red;\">1234</span>";
  }
}

在上面的例子中，1234没有变红。

以下是plnkr

Answer 1

  constructor(private sanitizer:DomSanitizer) {
    this.html = sanitizer.bypassSecurityTrustHtml("<span style=\"color:red;\">1234</span>");

Plunker example

另见

Answer 2

更改plunker中的代码，如下所示：

import {Component, NgModule,ElementRef,ViewChild} from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <input type="text" [(ngModel)]="html">
    <div [innerHtml]="html" #value>
    </div>
  `,
})
export class App {
  name:string;
  html: string;

  @ViewChild("value") el : ElementRef

  constructor() {
    this.name = 'Angular2'
    this.html = "1234";
  }
  ngOnInit(){
    this.el.nativeElement.style.color = "red";
  }
}

Angular2中的内联样式

2 个答案: