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