angular - angular 8 - 在指令中工作的自定义管道？

Question

我有一个像这样的图像标签：

<img [src]="image" />

传入的是一个不安全的 url（它是一个离子应用程序），所以我创建了一个管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe',
})
export class SafePipe implements PipeTransform {
  public sanitizer: DomSanitizer;
  constructor(sanitizer: DomSanitizer) {
    this.sanitizer = sanitizer;
  }
  transform(value: string): SafeUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(value);
  }
}

现在我已将我的 html 更新为：

<img [src]="image | safe" />

这怎么行不通，并且 Angular 正在清理图像。我需要在组件中手动完成：

this.image = this.domSanitizer.bypassSecurityTrustResourceUrl(url);

只有这样，图像才不会被净化。我不能在我的指令中使用管道吗？我做错了吗？谢谢你。

标签： angular

Answer 1

利用this.domSanitizer.bypassSecurityTrustUrl

这是我的整个管道

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeResourceUrl, SafeUrl, SafeScript, SafeStyle } from '@angular/platform-browser';

@Pipe({
  name: 'sanitizeSafe'
})
export class SanitizeSafePipe implements PipeTransform {

constructor(public _sanitizer?: DomSanitizer) {}

transform(value: any, args?: any): SafeHtml | SafeStyle | SafeScript |SafeUrl | SafeResourceUrl  {
 if(args) {
  switch (args) {
    case 'HTML': return this._sanitizer.bypassSecurityTrustHtml(value);
    case 'STYLE': return this._sanitizer
                             .bypassSecurityTrustStyle(`url(${value})`);
    case 'SCRIPT': return this._sanitizer.bypassSecurityTrustScript(value);
    case 'URL'     : return this._sanitizer.bypassSecurityTrustUrl(value);
    case 'RESOURCE': return this._sanitizer
                                .bypassSecurityTrustResourceUrl(`url(${value})`);
       default: throw new Error(`Invalid safe type specified: ${args}`);
    }
   } else {
     return this._sanitizer.bypassSecurityTrustHtml(value);
   }
  }
}