Angular弹窗加载PDF：动态传入链接绑定失效问题求助

你的问题出在HTML里的data属性没有使用Angular的属性绑定语法，导致srclink被当成字符串而非动态变量。以下是修正方案：

1. 修正HTML模板的属性绑定 #

把data="srclink"改成Angular属性绑定语法[data]="srclink"，才能关联到TypeScript中的变量：

<div #outsideElement>
  <div class="modal-view-container">
    <div #modalView class="modal view">
      <div class="modal-view-details">
        <p style="text-align: center;margin-top: 0; margin-bottom: 0">
          <object [data]="srclink" type="application/pdf" width="100%" height="592px"> </object>
        </p>
      </div>
    </div>
  </div>
</div>

2. TypeScript中处理链接 #

• 本地PDF文件：直接赋值assets路径即可，无需额外处理

  // 组件类中定义变量
  srclink: string = 'assets/pdf/your-local-file.pdf';
  

• 外部PDF链接：Angular安全机制会拦截未信任的资源URL，需用DomSanitizer处理

  import { Component } from '@angular/core';
  import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html'
  })
  export class YourComponent {
    srclink: SafeResourceUrl;
  
    constructor(private sanitizer: DomSanitizer) {
      // 替换为实际外部PDF链接
      const externalPdfUrl = 'https://example.com/target-document.pdf';
      this.srclink = this.sanitizer.bypassSecurityTrustResourceUrl(externalPdfUrl);
    }
  }
  

内容的提问来源于stack exchange，提问作者sreeja