我将 html 作为 innerHtml 传递给我的视图。以下是我的看法
<div [innerHTML]="someHtmlCode"></div>
如果我通过下面的代码,它工作正常。
this.someHtmlCode = "<div><b>This is my HTML.</b></div>"
如果我传递下面包含颜色的代码,它就不起作用。
this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';
您遇到的这种行为是正常的。该类添加到innerHTML
被忽略,因为默认情况下封装是Emulated
。这意味着 Angular 可以防止样式拦截组件内部和外部。
您应该将封装更改为None
在你的组件中。
这样,您就可以在任何您想要的地方定义类:内部styles
或在单独的.css
, .scss
or .less
style-sheet(没关系),Angular 会自动将它们添加到 DOM 中。
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>';
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)