angualr6: обновление атрибута iframe src, но pdf не показывается несколько раз

Question

Ниже приведен код, который я написал, Pdf файл показывает один раз и не показывает один раз (не удалось загрузить pdf).Я также заменил iFrame, тот же сценарий.Несколько раз показывает pdf, иногда нет.Кто-нибудь может мне помочь.

Мой элемент HTML:

       <embed [src]="pdf.pdfSource | safe" type="application/pdf">

Мой код Ts:

  var blob = new Blob([response.collection], {
        type: 'application/pdf'
      });
      var url = URL.createObjectURL(response);
      self.pdf.pdfSource = url;

Я создал безопасную трубу, как показано ниже

import { Component, ViewEncapsulation, ViewChild, ElementRef, PipeTransform, Pipe, OnInit } from '@angular/core';
   import { DomSanitizer } from "@angular/platform-browser";

   @Pipe({ name: 'safe' })
       export class SafePipe implements PipeTransform {
          constructor(private sanitizer: DomSanitizer) { }
            transform(url) {        
              return this.sanitizer.bypassSecurityTrustResourceUrl(url);
            }
   }

Answer 1

Я бы предпочел создать пользовательский компонент для обработки таких требований:

Создайте объект-встраивание component, передайте исходный URL и введите в него атрибуты input. Это будет обновляться каждый раз при изменении входных значений для компонента.

Ex:

import { Component, Input, OnChanges, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
    selector: 'object-embed',
    template: `<div [innerHTML]="safeHtml"></div>`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ObjectEmbedComponent implements OnChanges {
    @Input() srcUrl: string;
    @Input() embedType: string;
    public safeHtml: SafeHtml;

    ngOnChanges() {

       let html = '';
       if(this.embedType ==='application/pdf'){
           html = '<embed src="${this.srcUrl} type="${this.embedType}">'
       }
       this.safeHtml = this.getSafeHtml(html);
   }


     getSafeHtml(html: string) {
        return this.sanitizer.bypassSecurityTrustHtml(html);
     }

}

И используйте этот компонент:

<object-embed [embedType]="pdf" [srcUrl]="document-url-here"/>

Теперь эти значения могут быть переданы с использованием объекта / переменной, определенной в родительском компоненте, или напрямую. если у вас есть объект docDetails с этими значениями, вы можете использовать его следующим образом (при условии, что у него есть свойства docType и docUrl:

<object-embed [embedType]="docDetails.docType" [srcUrl]="docDetails.docUrl"/>