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属性。每次组件的输入值发生变化时，都会更新。

例如：

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"/>