类型 'SafeResourceUrl' 不可分配给类型 'string'

Question

我正在尝试清理 pdf url 并想将它分配给一个字符串类型变量，以便我可以将它用于 pdf 查看器。有什么办法吗？如果我对 pdfSrc 类型使用 any 类型，我将得到 Invalid parameter object: need either .data, .range or .url in the <pdf-viewer>。

注意：我用的URL是为了参考，我会在那个地方使用外部URLs

landingpage.component.ts

import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

export class LandingpageComponent implements OnInit {
     public pdfSrc: string;
}

constructor(    
    private sanitizer: DomSanitizer) {
}

fnOpenAsset() {     
   let url = 'http://localhost/pdf_viewer-master/18/docs/pdf.pdf';
   this.pdfSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

landingpage.component.html

<pdf-viewer class="alignComponentCenter" [src]="pdfSrc" 
</pdf-viewer>

Answer 1

如前所述，您可以只删除变量声明（或声明 any 类型），但我怀疑很多人会同意这是正确的解决方案。

各种 Dom 消毒方法不 return 字符串，它们 return 各种对象类型。

查看官方 API 文档：https://angular.io/api/platform-browser/DomSanitizer

this.sanitizer.bypassSecurityTrustResourceUrl(url);

Returns一个SafeResourceUrl类型的对象，不是字符串；所以你的声明应该反映这一点而不是模糊的 any 类型。

Answer 2

我有办法解决这个问题。我尝试使用 sanitize() 方法再次清理 SafeResourceUrl，其 return 值为 string |无效的。

如果您想使用 bypassSecurityTrustUrl()，则 SecurityContext.URL 将发生。在我的例子中，我使用了 SecurityContext.RESOURCE_URL


export class LandingpageComponent implements OnInit {
     public pdfSrc: string;
}

constructor(    
    private sanitizer: DomSanitizer) {
}

fnOpenAsset() {     
   let url = 'http://localhost/pdf_viewer-master/18/docs/pdf.pdf';
   this.pdfSrc = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, this.sanitizer.bypassSecurityTrustResourceUrl(url));
}```

Answer 3

未来的解决方案

angular 团队正在努力使 Safe* 类型的使用更加灵活。据我了解 angular github 页面上的 issue #33028 他们目前允许直接使用 Safe* 类型作为 string。这样您就可以使用 bypassSecurityTrustResourceUrl() 并将 return 值直接分配给 src 属性。正如@Muthu 最初尝试的那样。

this.pdfSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url);

这会影响以下类型（因为它们都扩展了 SafeValue 接口）：

SafeHtml
SafeUrl
SafeResourceUrl
SafeScript
SafeStyle

当前解决方案

目前访问实际字符串的最佳解决方法似乎是 re-sanitize Safe* 值，就像@Muthu 在他接受的答案中指出的那样。

或者，可以使用 any 类型或在调用函数后使用 as string 强制 return 值成为字符串。请注意，这仅适用于某些场景，例如从 SafeHtml.

分配 HTML 代码

let html: any = this.sanitizer.bypassSecurityTrustHtml("<h1>just some html!</h1>");
let html2: string = this.sanitizer.bypassSecurityTrustHtml("<h1>even more html!</h1>") as string;

Answer 4

只保留 public pdfSrc 没有任何类型。它会自动转换所需的类型。

import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

public pdfSrc;

constructor(private sanitizer: DomSanitizer) {
}

fnOpenAsset() {     
   let url = 'http://localhost/pdf_viewer-master/18/docs/pdf.pdf';
   this.pdfSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

类型 'SafeResourceUrl' 不可分配给类型 'string'

Type 'SafeResourceUrl' is not assignable to type 'string'

pdf-viewer

typescript

angular

未来的解决方案

当前解决方案