angular引用iframe报错解决方法

angular直接使用iframe会报错

 

 

 解决方法：

新建管道safe-pipe

safe-pipe.pipe.ts

import { Pipe, PipeTransform } from "@angular/core"; import { DomSanitizer } from "@angular/platform-browser"; @Pipe({ name: "safe" }) export class SafePipe implements PipeTransform {   constructor(private sanitizer: DomSanitizer) {}   transform(url) {     return this.sanitizer.bypassSecurityTrustResourceUrl(url);   } }

 

safe-pipe.module.ts

import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { SafePipe } from "./safe-pipe.pipe"; @NgModule({   imports: [CommonModule],   declarations: [SafePipe],   exports: [SafePipe] }) export class SafePipeModule {}

 

将SafePipeModule暴露给外部使用，在module中

exports: [SafePipeModule]   在使用iframe的时候

<iframe  [src]="cSrc | safe" width="640" height="360" allowfullscreen allow="autoplay"></iframe>