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

【问题标题】：Angular 2: How can I apply directives to sanitized html/innerhtmlAngular 2：我如何将指令应用于净化的 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 stackoverflow.com/questions/38888008/… 的组件和指令
我的项目需要 AoT 编译。动态组件看起来很有希望，但我猜它不适用于 AoT？我决定暂时在“ngAfterViewInit()”期间解析 html 并将标签转换为纯链接（失去 routerLinks 的单页功能）。
我不知道当前的状态。几个月前有一个关于这个的讨论，看起来有办法让它协同工作。不确定从那以后情况是否有所改善/恶化。讨论在 Angular Github 问题中。
我仔细研究了这个，它似乎可以与 AoT 编译器一起使用。如果您将此作为答案提交，我会将其标记为正确

标签： angular innerhtml angular2-directives angular-dom-sanitizer

【解决方案1】：

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

【讨论】：

【解决方案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），所以这不能解决我的问题。