typescript 类型“SafeResourceUrl”不能赋给类型“string”

z9zf31ra  于 2022-12-24  发布在  TypeScript
关注(0)|答案(4)|浏览(683)

我正在清理一个pdf网址,想把它赋给一个字符串类型的变量,这样我就可以在pdf查看器中使用它。有什么方法可以做到这一点吗?如果我使用any类型作为pdfSrc类型,我会得到Invalid parameter object: need either .data, .range or .url in the <pdf-viewer>

**注意:**我使用的URL是供参考之用,我会在该位置使用外部URL
登录页面.组件.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);
}

登录页面.组件.html

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

ttcibm8c1#

我有一个方法可以解决这个问题。我尝试使用sanitize()方法再次清理SafeResourceUrl,该方法的返回值为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));
}
zbdgwd5y

zbdgwd5y2#

正如已经建议的,您可以只删除变量声明(或声明any类型),但我怀疑许多人会同意这是正确的解决方案。
各种Dom杀毒程序方法不返回字符串,它们返回各种对象类型。
参见官方API文档:https://angular.io/api/platform-browser/DomSanitizer

this.sanitizer.bypassSecurityTrustResourceUrl(url);

返回SafeResourceUrl类型对象,而不是字符串;因此您的声明应该反映这一点,而不是模糊的any类型。

1wnzp6jl

1wnzp6jl3#

未来解决方案

angular团队正在努力使Safe*类型的使用更加灵活。据我所知,在angular github页面上的issue #33028目前允许直接使用Safe*类型作为string。这样,您可以使用bypassSecurityTrustResourceUrl()并直接将返回值赋给src属性。正如@Muthu最初尝试的那样。
this.pdfSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url);
这将影响以下类型(因为它们都扩展SafeValue接口):

  • SafeHtml
  • SafeUrl
  • SafeResourceUrl
  • x1米10英寸1x
  • x1米11米1x

当前溶液

目前看来,访问实际字符串的最佳解决方案是重新清理Safe*值,就像@Muthu在他接受的答案中指出的那样。
或者,可以使用any类型,或者在调用函数后使用as string强制返回字符串。注意,这只适用于某些情况,例如从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;
wixjitnu

wixjitnu4#

只要保持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);
}

相关问题