javascript - 进行 DomSanitizer API 调用时不使用基本属性？

Question

我正在使用 DomSanitizer 调用电话，如下所示:

        this.domSanitizer.bypassSecurityTrustResourceUrl(url));

url 是正在获取的 SVG 图像的完整 URL。

这是一个示例:

      this.matIconRegistry.addSvgIcon(
        "fs",
        this.domSanitizer.bypassSecurityTrustResourceUrl('https://github.com/fireflysemantics/images/blob/master/fsalpha/logo/fsalpha-logo-optimized.svg'));

但是，由于 base 设置为 index.html 中的另一个 URL，因此 dom sanitizer URL 会以其为前缀。

有办法关闭这个功能吗？

这是我写的一篇文章，展示了在不添加 base 属性的情况下它是如何工作的:

https://medium.com/@ole.ersoy/angular-material-icon-from-github-hosted-svg-logo-d5c35b923d

这是一个stackblitz，显示当添加base属性时，对绝对URL的调用会以base属性为前缀，因此传递的URL会损坏:

https://stackblitz.com/edit/angular-material-custom-icon-with-base?file=src/index.html

功能请求

Angular 针对此问题提出了一个功能请求:

https://github.com/angular/angular/issues/23139

Angular 问题

https://github.com/angular/angular/issues/34645

错误截图

这是堆栈跟踪的屏幕截图，显示基本 URL 在图像 URL 之前添加前缀:

Answer 1

这看起来像是一个错误。 HttpClient 不可能重写具有协议(protocol)的 URL。

Material 图标注册表不会改变任何图标的 URL。它实际上并没有对 URL 做任何特殊的事情，只是推迟加载到 HttpClient。

https://github.com/angular/components/blob/09dc4594259cf1d6b34a5a0893c0bccaa132c319/src/material/icon/icon-registry.ts#L595

我无法重现此问题，因为它需要将应用程序部署到 gh Pages 这样的域，但如果您看到这种情况发生，请在 Angular GitHub 项目上打开一个问题并让他们知道。

我能给你的唯一答案是编写一个自定义拦截器来修复 URL。

这里有一篇博客解释了如何使用拦截器来使用基本 URL。它不是关于如何解决您的问题的指南，但它是我能找到的最接近的东西。

http://www.projectcodify.com/angular-set-base-url-dynamically