如何使用视图封装在 Angular 中设置 InnerHTML 内容的样式？

使用视图封装在 Angular 中设置 InnerHTML 样式

在 Angular 中，设置innerHTML 属性允许您在组件视图中动态渲染 HTML 内容。但是，在尝试设置此注入内容的样式时，您可能会遇到问题。

问题：使用innerHTML 注入包含内联样式的HTML 内容时，可能无法应用样式。例如，以下代码不会将背景颜色样式应用于注入的 div 元素：

<code class="typescript">this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';</code>

解决方案： Angular 默认情况下采用称为“模拟”视图封装的概念。这可以防止组件内定义的样式干扰组件外部定义的样式。要允许注入内容的内联样式，您需要将封装更改为 None。

<code class="typescript">@Component({
  selector: 'example',
  styles: ['.demo {background-color: blue}'],
  template: '<div [innerHTML]="someHtmlCode"></div>',
  encapsulation: ViewEncapsulation.None,
})</code>

通过将封装属性设置为 None，Angular 将不再阻止应用内联样式。这允许您在组件的样式数组和注入的 HTML 内容中定义样式，Angular 会自动将它们应用到 DOM。

以上是如何使用视图封装在 Angular 中设置 InnerHTML 内容的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！