在 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中文网其他相关文章！
