Ng2 innerHTML 如何允许样式属性？ [复制]

Posted 2023-05-07

【中文标题】Ng2 innerHTML 如何允许样式属性？ [复制]

【英文标题】：Ng2 innerHTML How to allow style attribute? [duplicate]

【发布时间】：2017-07-09 14:54:05

【问题描述】：

我正在尝试使用 [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>

【问题讨论】：

只有样式属性下的样式适用于组件。

【参考方案1】：

您可以通过 /deep/ ::ng-deep

与他们联系

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

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

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

但这可能会带来其他缺点，因为样式渗入甚至没有/deep/ 渗出的样式。

【讨论】：

这在没有定义宽度的情况下是否通用？

“不定义宽度”是什么意思？这是普通的 CSS，它只是添加了 /deep/ 以跨越组件边界，例如直接子代的 >。动态添加的 HTML 与来自子组件的 HTML 类似。