Ng2 innerHTML如何允许样式属性？

Question

我尝试使用[innerHTML]在Angular 2中渲染HTML。但是，angular 2会从html元素中删除style属性。如何渲染样式？

component.ts

...
content = "<table><tr><td style="width:30%">Hallo</td><td style="width:70%">Welt</td></tr></table>"
---

component.html

<div [innerHTML]="content"></div>

Answer 1

您可以使用 /deep/ ::ng-deep

来解决这些问题

@Component({
  styles: [`
    // :host /deep/ td { // old
    :host ::ng-deep td {
      width: 30%;
    }`
})

您还可以禁用组件的样式封装

@Component({
  ...,
  viewEncapsulation: ViewEncapsulation.None
)}

但这可能带来其他缺点，因为样式流血甚至样式没有/deep/流血。