如何在 Angular 中将样式应用于 InnerHTML？

在 Angular 中设置 InnerHTML 样式

在 Angular 中设置 innerHTML 时，您可能会遇到样式应用不正确的问题。这是由于 Angular 的封装机制，默认情况下会阻止内部 HTML 内容继承样式。

要解决此问题，您可以将组件的封装属性更改为“None”。这允许将组件中定义的样式应用于内部HTML内容。

具体操作方法如下：

<code class="typescript">import { Component, ViewEncapsulation } from '@angular/core';

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

  constructor() {
    this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>';
  }
}</code>

通过将封装设置为“None”，您可以在任何地方定义样式在您的组件或单独的 CSS 文件中，Angular 在渲染 insideHTML 内容时会自动将它们添加到 DOM。

以上是如何在 Angular 中将样式应用于 InnerHTML？的详细内容。更多信息请关注PHP中文网其他相关文章！