在 Ivy 中使用自定义 DomSanitizer

Question

我在 Angular 9 应用程序中使用 ng-dompurify，我用 NgDompurifyDomSanitizer 实现替换了默认的 Angular DomSanitizer。

@NgModule({
    // ...
    providers: [
        {
            provide: DomSanitizer,
            useClass: NgDompurifyDomSanitizer,
        },
    ],
    // ...
})

在做

之类的事情时就是这样

<div [innerHTML]="someHtmlString"></div>

DomPurify 将用于清理那个 HTML 字符串。

当我不使用 Ivy 时，这工作正常，但当我使用 Ivy 时，渲染的 HTML 被除 NgDompurifyDomSanitizer 之外的东西清理。我不确定在那种情况下使用的是什么消毒剂，但我看到样式属性从 html 元素中剥离，如果使用 NgDompurifyDomSanitizer 则不会发生这种情况。

我在这里整理了一个 stackblitz 示例来说明这个问题：https://stackblitz.com/edit/angular-domsanitizer-ivy。如果您进入 stackblitz 设置并取消选中“启用常春藤”复选框，您可以看到文本呈现为红色，但选中后内联样式被剥离并且文本为黑色。

我不确定我是否需要做一些特别的事情才能使它与 Ivy 一起工作，或者 Ivy 是否不支持它。我在谷歌上搜索了一天的大部分时间，试图找出答案，但我没有任何运气。

如果有人有任何见解，我将不胜感激。

编辑：对于那些感兴趣的人，这似乎是一个错误，我已经开了一张票：https://github.com/angular/angular/issues/36794

Answer 1

angular 团队的 Kristiyan Kostadinov 对那些感兴趣的人发布了我在以下位置打开的工单的解决方案：https://github.com/angular/angular/issues/36794

他说。

I think the problem is that you should be providing Sanitizer, not DomSanitizer. Here's a working example: https://stackblitz.com/edit/angular-domsanitizer-ivy-facotn

将代码改成这样似乎有效：

@NgModule({
    // ...
    providers: [
        {
            provide: Sanitizer,
            useClass: NgDompurifyDomSanitizer,
        },
    ],
    // ...
})

在 Ivy 中使用自定义 DomSanitizer

Using custom DomSanitizer with Ivy

angular-dom-sanitizer

angular-ivy

dompurify

angular9