Angular 2：我如何将指令应用于净化的 html/innerhtml

Posted 2023-05-07

【中文标题】Angular 2：我如何将指令应用于净化的 html/innerhtml

【英文标题】：Angular 2: How can I apply directives to sanitized html/innerhtml

【发布时间】：2018-02-23 07:35:58

【问题描述】：

我正在开发一个应用程序，我从服务器获取 html 格式的响应。 我正在使用 DomSanitizer 的 bypassSecurityTrustHtml 并将经过清理的 html 添加到我的组件 ()。

我的问题是响应中的一些元素包含标记以指示可以从元素构建链接，例如：

<div thisIsActuallyaLink linkParam1="foo" linkParam2="bar">clickHere</div>

我想创建一个应用于 innerhtml 的指令，但是在显示 html 时，它没有用我的指令编译...

如果有人想知道为什么没有在服务器端转换 html：响应在多个应用程序中使用，并且链接必须具有不同的相对 url，具体取决于应用程序:-(

【问题讨论】：

[innerHTML]="..." 根本不可能。您可以在运行时编译组件以获得动态 HTML ***.com/questions/38888008/…

的组件和指令

我的项目需要 AoT 编译。动态组件看起来很有希望，但我猜它不适用于 AoT？我决定暂时在“ngAfterViewInit()”期间解析 html 并将标签转换为纯链接（失去 routerLinks 的单页功能）。

我不知道当前的状态。几个月前有一个关于这个的讨论，看起来有办法让它协同工作。不确定从那以后情况是否有所改善/恶化。讨论在 Angular Github 问题中。

我仔细研究了这个，它似乎可以与 AoT 编译器一起使用。如果您将此作为答案提交，我会将其标记为正确

【参考方案1】：

[innerHTML]="..." 根本不可能做到这一点。 您可以在运行时编译组件以获得动态 HTML 的组件和指令。

更多详情请见How can I use/create dynamic template to compile dynamic Component with Angular 2.0?。

【参考方案2】：

也许可以尝试使用 Pipe，如下所示：

import  Pipe, PipeTransform  from '@angular/core';
import  DomSanitizer  from '@angular/platform-browser';

@Pipe( name: 'safeHTML' )
export class SafeHtml implements PipeTransform 

    constructor(private sanitizer: DomSanitizer)  

    transform(html: string) 
        return this.sanitizer.bypassSecurityTrustHtml(html)
    
 

并且比 [innerHtml]="htmlExample | safeHTML"

【讨论】：

这就是 domsanitizer 的工作原理。它类似于我已经在做的，但它在编译期间不使用角度指令（如 routerLink），所以这不能解决我的问题。