Angular

Question

使用两个管道从我的数据库中制作了一个 html 标记，更安全、更短：

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(protected sanitizer: DomSanitizer) {}

     public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
        switch (type) {
                case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
                . . .
            }
      }
    }

和

@Pipe({
  name: 'summary'
})
export class SummaryPipe implements PipeTransform {

  transform(content: string, characterLimit: number): string {
    if (content.length <= characterLimit) {
      return content;
    } else {
      return `${content.substring(0, characterLimit)}...`;
    }
  }

}

将它与一根管道一起使用：

<div [innerHtml]="blog.content | safe: 'html'"></div>

但是第二个管道停止显示：

<div [innerHtml]="blog.content | safe: 'html' | summary:100"></div>

我该如何解决？

Answer 1

  <div [innerHtml]="(blog.content | safe: 'html') | summary:100"></div>

你试过这样做吗？

Answer 2

您的摘要管道需要一个字符串，但是您的安全管道 return 是 SafeValue.

你应该最后使用安全管道：

<div [innerHtml]="blog.content | summary:100 | safe: 'html'"></div>

这是让它在这种特定情况下工作的唯一方法，因为摘要管道 return 是一个新的不安全字符串。如果最后使用，它会被 innerHtml 自动清理。

因为 bypassSecurityTrustHtml 根本不改变这个值，最后调用它是安全的。如果您确实需要清理字符串（删除 html 元素），只需将字符串直接传递给 innerHtml，无需任何绕过方法，它将为您清理。

Angular - 使用两个管道转换 innerHtml

Angular - transform innerHtml using two pipes

typescript

angular2-custom-pipes