Question

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

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

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

Answer 1

您始终可以将组件封装更改为viewEncapsulation.None。

import { Component, ViewEncapsulation } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `
    <div [innerHtml]="safeHTML(someHtml)"></div>
  `,
  styles: [`.red { color: red }`],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  someHtml = '<span class="red" style="font-size:18px">Hello</span>'

  constructor(private sanitizer: DomSanitizer) { }

  safeHTML(str: string) {
    return this.sanitizer.bypassSecurityTrustHtml(str);
  }

}

Live demo

Answer 2

您可以在全局样式表中为该动态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中被标记为已弃用，但在找到替代品之前它不会消失

不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃Angular中的支持（对于/ deep /，＆gt;＆gt;＆gt;和:: ng-deep的所有3个）。在此之前，应该首选:: ng-deep，以便与工具实现更广泛的兼容性。

What to use in place of ::ng-deep

<强> component.css

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

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

2 个答案: