Привязать угловой канал к динамически созданному элементу HTML

Question

Я пытаюсь отобразить изображение блоба. В IE 11 он не поддерживается и отображает разорванное изображение, поэтому я создал канал, который преобразует изображение BLOB-объекта в базу 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';
}

Скриншоты как это .