將角度管道綁定到動態創建的HTML元素

Question

我正在嘗試顯示斑點圖像。 在IE 11中，它不受支持並顯示損壞的圖像，因此我創建了一個將blob圖像轉換為base 64的管道。

有什么方法可以將該管道綁定到新創建的圖像元素？

以下代碼似乎不起作用，

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

其中blobToBase64是管道。

Answer 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);
  }

}

Answer 2

您還可以參考此示例在Angular應用程序中添加圖像元素：

html代碼：

<div id="div_container">

</div>

Component.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';
}

屏幕截圖是這樣的 。