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/ 渗出的样式。