Angular 5 自定义管道答案

【问题标题】：Angular 5 custom pipeAngular 5 自定义管道
【发布时间】：2019-10-12 15:13:20
【问题描述】：

我是 Angular 新手，面临这个问题。

我想创建一个自定义管道，用于将十进制代码转换为 base64 图像，然后在视图中显示它们。我有这个问题的完整代码，但不知道如何将它用于自定义管道。

这是我的代码：

my-component.ts

this.imgIn = "";
var chars1 = dataParkir.pictstart.data; // array of decimal codes
for (var k = 0; k < chars1.length; k++) {
  var convert = String.fromCharCode(chars1[k]); // convert into base64
  this.imgIn = this.imgIn + convert; 
}

this.base64ImageIn = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64,' + this.imgIn);

有没有其他人遇到过这种情况，请帮助我？

【问题讨论】：

标签： node.js angular typescript

【解决方案1】：

我强烈建议您查看文档，它非常容易理解，并为您提供了创建自定义管道可能需要的大量信息，这是官方文档的链接：Angular - Pipes

【讨论】：

【解决方案2】：

如果您的 sn-p 代码已经完成了您想要的操作，那么迁移到自定义管道非常简单。你只需要绑定你的十进制数组并使用一个管道来转换它，就像你现在做的那样。比如：

管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
  name: 'base64'
})
export class Base64Pipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer){}

  transform(value: any,){
    let imgIn="";
    for (var k = 0; k < value.length; k++) {
        var convert = String.fromCharCode(value[k]); // convert into base64
        imgIn += convert;
      }
      let base64Url =this.sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64,' + imgIn);
      return base64Url;
  }
}

你会这样使用它：[src]="yourDecimalCodeArray | base64"

这里有一个Stackblitz 来说明。

请记住，使用this.sanitizer.bypassSecurityTrustResourceUrl 意味着您必须安全地绑定(Safe value must use [property]=binding after bypass security with DomSanitizer)。

希望这会有所帮助。

【讨论】：