css - Angular 7 - innerHTML - 从数据库渲染 HTML 标签

Question

我正在创建一个文档工具，您可以在其中编写文档(在 contenteditable 元素中)，您可以在其中插入不同类型的框等具有格式化样式(类名)的内容。

它在上传时保存到 mongoDB，但是当我通过 innerHTML 从 DB 渲染文档时，如果我在 TAG 上有 css 定义，而不是在 CLASS 上，样式只会在元素上渲染。

例如作品:

code {
 color: red;
}

不起作用:

.jcl-code {
 color: red;
}

我已经解决了 viewEncapsulation.None，还制作了一个 safeHtml 管道来跳过清理。

<p class="card-body" innerHTML="doc[currentId].body | safeHtml">

你能给我一些提示，为什么它不适用于类？

非常感谢!

Answer 1

你需要添加 :host::ng-deep 到你的类所以 :host::ng-deep .jcl-code {...} 因为必要的类不会自动添加到通过 [innerHTML] 添加的 HTML 中。

关于 ::ng-deep 的更多细节和信息及其用法检查 https://stackoverflow.com/a/36265072/606104