Angular：unsafe value used in a resource URL解决及DomSanitizer导致重复刷新的问题

问题1：unsafe value

<embed [src]="file.fileurl"/>

动态给 embed 标签绑定 src 属性时，浏览器控制台会提示报错：ProcessSupplementTaskComponent.html:21 ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

解决1

使用 DomSanitizer

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

constructor(private sanitizer: DomSanitizer){}

transform(url: string): SafeResourceUrl {
  return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

<embed [src]="transform(file.fileurl)"/>

问题2：embed加载成功后点击任意组件都会重复刷新

解决2：将 DomSanitizer 的使用封装到 pipe

import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";

@Pipe({
  name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer){

  }

  transform(url: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

<embed [src]="file.fileurl | safeUrl"/>

暂时还不知道为什么这样就不会重复刷新了