angular - Angular2中的内联样式

Question

我从 的 HTTP 调用中获取 HTML 代码块具有内联样式 在里面。我将 HTML block 放在一个变量中，并使用 [innerHTML] 将其插入我的页面，但我看不到插入的 HTML block 中反射(reflect)的样式。有人对我如何实现这一点有任何建议吗？

@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

也可以看看

https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

In RC.1 some styles can't be added using binding syntax