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>");

柱塞示例

也可以看看

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

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";
  }
}