Angular2 innerHtml刪除樣式

Question

我正在使用innerHtml並在我的cms中設置html，響應似乎沒問題，如果我這樣打印它: {{ poi.content }}

它給了我正確的內容：`

<table border="0" cellpadding="5" cellspacing="0">
   <tbody>
     <tr>
       <td style="vertical-align: top;">Tes11t</td>
       <td style="width: 2px;">&nbsp;</td>
       <td style="width: 1px;"><img alt="midgetgolf-sport-faciliteiten-vakantiepark-2.jpg" src="http://beeksebergen.dev/app_dev.php/media/cache/resolve/full_size/midgetgolf-sport-faciliteiten-vakantiepark-2.jpg" style="height: 67px; width: 100px;" /></td>
      </tr>
    </tbody>
 </table>

`

但是當我使用[innerHtml]="poi.content"它會給我這個html：

<table border="0" cellpadding="5" cellspacing="0">
    <tbody>
        <tr>
            <td>Tes11t</td>
            <td>&nbsp;</td>
            <td><img alt="midgetgolf-sport-faciliteiten-vakantiepark-2.jpg" src="http://beeksebergen.dev/app_dev.php/media/cache/resolve/full_size/midgetgolf-sport-faciliteiten-vakantiepark-2.jpg"></td>
        </tr>
    </tbody>
</table>

當我使用[innerHtml]時，有誰知道為什么它會剝離我的樣式

Answer 1

Angular2清理動態添加的HTML，樣式，......

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

[innerHtml]="poi.content | safeHtml"

看到

• https://angular.io/docs/ts/latest/api/platform-b​​rowser/index/DomSanitizer-class.html
• 在RC.1中，無法使用綁定語法添加某些樣式以獲取更多詳細信息。