自从我遇到一个我不知道它可能来自何处的问题以来已经有好几天了。
我目前在一个observable中检索我文章的内容,然后在角度模板中循环它。到目前为止,我没有问题,我得到的信息很好,我显示但HTML不是使用innerHTML解释,也不是使用DomSanitizer管道。
我试图将我的observable的信息存储在一个表中,以查看它是否来自异步但不是。
我看到有必要使用DomSanitizer来强制安全性,因为当包含HTML的字符串太长时(这是我的情况,因为它是长段落),innerHTML没有效果。
这个字符串非常适合我的管道,因为当我创建一个包含字符串的变量的console.log时,它会在我的控制台中显示我的HTML标签。
如果您知道我的问题可能来自何处,请知道我在控制台中没有错误。
这是我的代码,没有管道和HTML没有解释:
<div *ngFor="let article of informationsArticle|async;">
<div [innerHTML]="article.contenu_part1" *ngIf="article.contenu_part1"></div>
</div>
管道和HTML未解释:
<div *ngFor="let article of informationsArticle|async;">
<p [innerHTML]="article.contenu_part1 | keepHtml" *ngIf="article.contenu_part1"></p>
</div>
管道代码:
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({ name: 'keepHtml', pure: false })
export class EscapeHtmlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {
}
transform(content) {
return this.sanitizer.bypassSecurityTrustHtml(content);
}
}
我在app.module.ts文件的“声明”中添加了它,并在文件顶部导入了它。
在控制台中呈现源代码: