Angular 4资源URL上下文使用不安全值问题求助

看起来你已经尝试用DomSanitizer绕过Angular的安全URL限制，但核心问题在于：你只是在构造函数里调用了bypassSecurityTrustResourceUrl方法，却没有把处理后的安全URL存储为组件属性，模板里依然在使用未经过安全处理的原始路径，所以错误还会出现。

下面是完整的修复方案：

步骤1：在组件中创建安全URL属性 #

首先在组件类里定义一个专门的属性，用来存储经过安全处理的PDF URL：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  // 存储安全的PDF资源URL
  safePdfUrl: SafeResourceUrl;
  // 假设这是你的文件对象（可能从API或其他地方获取）
  file = { filename: 'your-document.pdf' };

  constructor(private sanitizer: DomSanitizer) { }
}

步骤2：在合适的时机处理URL #

建议在ngOnInit钩子中（而不是构造函数）处理URL，因为此时组件的输入数据大概率已经初始化完成：

ngOnInit(): void {
  // 拼接原始PDF路径
  const rawPdfUrl = `./uploads/${this.file.filename}`;
  // 处理为安全URL并赋值给组件属性
  this.safePdfUrl = this.sanitizer.bypassSecurityTrustResourceUrl(rawPdfUrl);
}

步骤3：模板中使用安全URL #

在模板里通过属性绑定的方式使用这个安全属性，不要用插值表达式（{{}}），否则会破坏Angular的安全标记：

<object [data]="safePdfUrl" type="application/pdf" width="100%" height="600px">
  <!-- 降级处理：如果浏览器不支持PDF预览 -->
  您的浏览器无法预览PDF，请<a href="./uploads/{{file.filename}}">点击下载</a>查看。
</object>

额外注意事项 #

• 如果你的file对象是异步获取的（比如从API请求），一定要在数据返回后再执行URL处理逻辑，比如在subscribe回调中：

  this.fileService.getFile().subscribe(file => {
    this.file = file;
    const rawPdfUrl = `./uploads/${this.file.filename}`;
    this.safePdfUrl = this.sanitizer.bypassSecurityTrustResourceUrl(rawPdfUrl);
  });
  

• 确保./uploads/路径在你的项目中是可访问的，避免出现404错误。

内容的提问来源于stack exchange，提问作者J. Davidson