将角度管道绑定到动态创建的 HTML 元素答案

【问题标题】：Bind angular pipe to a dynamically created HTML element将角度管道绑定到动态创建的 HTML 元素
【发布时间】：2019-06-17 11:56:49
【问题描述】：

我正在尝试显示 blob 图像。在 IE 11 中不支持它并显示损坏的图像，因此我创建了一个将 blob 图像转换为 base 64 的管道。

有没有办法可以将此管道绑定到新创建的图像元素？

以下代码似乎不起作用，

const uploadedImgElement = document.createElement('img');
uploadedImgElement.src = response.data.attachmentDetails.fileFullPath + '| blobToBase64';

blobToBase64 是一个管道。

【问题讨论】：

构造函数（私有管道：YourPipeComponentName）{} YourFunction(value) { this.pipe.transform(value, 'pipeFilter'); }
stackoverflow.com/questions/35159079/…

标签： angular angular6 pipe blob internet-explorer-11

【解决方案1】：

你应该在你的组件中声明管道

@Component({
  ...,
  providers: [ BlobToBase64Pipe ]     // Declare it here
})
export class SampleComponent implement OnInit {

  // Add it on your constructor 
  constructor(private blobToBase64Pipe: BlobToBase64Pipe) {}

  ngOnInit() {
    ...

    const filePath = response.data.attachmentDetails.fileFullPath; 

    // Perform your pipe transform here
    const convert = this.blobToBase64Pipe.transform(filePath);
  }

}

【讨论】：

【解决方案2】：

您也可以参考此示例在 Angular 应用程序中添加图像元素：

html代码：

<div id="div_container">

</div>

组件.ts：

export class AboutComponent implements OnInit {

  constructor(private sanitizer:DomSanitizer) { }
  ngOnInit() {

    const newimage = document.createElement("img");
    newimage.src = this.base64Image;
    document.getElementById("div_container").innerHTML = newimage.outerHTML;

  }

  base64Image='data:image/png;base64, base64data';
}

截图类似this。

【讨论】：