angular - 通过 DomSanitizer 在 Angular 中使用类应用样式

Question

<div [innerHtml]="someHtml | safeHtml"></div>

someHtml = '<span class="fas fa-calendar" style="font-size:15px"></span>'

我通过 innerHtml 属性注入(inject)一个 html 元素，我可以通过绑定(bind) DomSanitizer 管道来应用一些内联样式。但我想知道除了使用 DomSanitizer 的内联样式之外，是否还有其他方法可以通过 class 应用样式。经过一些研究，我可以让它与 ::ng-deep 一起工作，但根据文档，它似乎已被弃用。任何见解将不胜感激!

Answer 1

您可以只在全局样式表中为该动态 html 设置样式，而不是在组件的样式表中。您只需要确保只针对该动态部分，这样您的样式就不会泄漏到其他元素

global.css

my-component div.dynamicContentWrapper span .fa-calendar
{
    font-size: 15px;
}

component.html

<div "class=dynamicContentWrapper" [innerHtml]="someHtml | safeHtml"></div>

使用 ng-deep

::ng-deep 确实在 documentation 中被标记为已弃用, 但在找到任何替代品之前它不会消失

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

What to use in place of ::ng-deep

组件.css

:host ::ng-deep .fa-calendar {font-size: 15px; }