Angular2 中的内联样式

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 示例

也可以看看

• https://angular.io/docs/ts/latest/api/platform-b​​rowser/index/DomSanitizer-class.html
• 在 RC.1 中，某些样式无法使用绑定语法添加