Angular 2：如何将指令应用于已清理的 html/innerhtml

Question

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

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

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

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

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

Answer 1

也许尝试使用 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"

Answer 2

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

的组件和指令

有关详细信息，请参阅。

Angular 2：如何将指令应用于已清理的 html/innerhtml

Angular 2: How can I apply directives to sanitized html/innerhtml

angular

innerhtml

angular2-directives

angular-dom-sanitizer