在双花括号内渲染 HTML

Question

我在 Ionic/Angular 应用程序中使用管道来转换文本并返回带有 html 代码的结果。

这是我如何使用我的管道的示例：

<ion-label>
  <span>{{ text | mypipe: 'lo':'secondary' }}</span>
</ion-label>

双卷曲内代码的结果HTML如下：

Loth<ion-text color='secondary'>lo</ion-text>rien

问题是在执行时，我在标签中看到的是 Loth<ion-text color='secondary'>lo</ion-text>rien 而不是 Lothlorien 和文本的彩色部分（即： 'lo')

知道我为什么会出现这种行为以及如何解决它吗？

谢谢

Answer 1

TLDR:

当你想要渲染包含 angular 组件的 html 时，你必须 create/compile 它们 dynamically in runtime.

Angular 默认情况下会清理进入视图的所有内容。要在您的模板中显示 html，您必须使用：

<span [innerHTML]="text | mypipe: 'lo':'secondary'"></span>

你的烟斗应该return SafeHtml:

@Pipe({
    name: 'mypipe'
})
export class MyPipe implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) {}

    public transform(value, params): SafeHtml {
        //do whatever your pipe does and then
        return this.sanitizer.bypassSecurityTrustHtml(somethingToReturn);
    }
}

见。

你也可以写一个通用的管道，就像在this article中那样，然后直接使用它：

<span [innerHTML]="text | mypipe: 'lo':'secondary' | safe: 'html'"></span>

但是由于您的标记包含另一个 angular 组件，它不会起作用。它适用于标准 html 标记。您想要寻找一种方法，不仅可以动态呈现一些 html，还可以 compile 您的模板并动态创建生成的组件。 these lines.

沿途的一些事情

在双花括号内渲染 HTML

Rendering HTML inside double curly braces

angular-template

angular-pipe

angular