Angular中绑定嵌入标签src属性的问题

发布于04月09日

我试图使用属性绑定在Angular中动态绑定一个embed标记的src属性，但它没有按预期的方式工作.

以下是我try 过的: 在我的TypeScript文件中，我声明了一个属性来保存源URL:

export class MyComponent {
 embedSource: string = 'pathtofile.pdf';
}

在我的模板文件(component.html)中，

<embed [src]="embedSource" type="application/pdf" width="100%" height="600px">

但是，PDF文件没有加载到embed标签中.我已经仔细判断了embedSource的值，它包含指向PDF文件的正确URL路径. 有人能帮我弄清楚是什么导致了这个问题吗？

推荐答案

PDF不会在stackblitz中呈现，但下面的示例代码可能会帮助您实现所需的内容.我们需要使用DomSanitizer方法bypassSecurityTrustResourceUrl这样angular将信任URL并加载资源！

import { Component } from '@angular/core';
import {
  DomSanitizer,
  SafeUrl,
  bootstrapApplication,
} from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <embed [src]="embedSource" type="application/pdf" width="100%" height="600px">
  `,
})
export class App {
  embedSource: SafeUrl = '';

  constructor(private sanitizer: DomSanitizer) {
    this.embedSource =
      this.sanitizer.bypassSecurityTrustResourceUrl('assets/dummy.pdf');
  }
}

bootstrapApplication(App);

Stackblitz Demo