angular - 在 Ionic 4 中传递 Iframe src 值

Question

我试图在 Ionic 页面中放置一个 iframe 但没有成功

src来自一个json值

<iframe src="{{PostContent.link}}"></iframe>

我遇到了一个错误

ERROR Error: unsafe value used in a resource URL context

编辑:我包含了我的 ts 页面页面

import { Component, ViewChild } from '@angular/core';
import { ApiProvider } from '../../providers/api/api.service';
import {  ActivatedRoute } from '@angular/router';


  postid: string;
PostContent:any = [];
  theInAppBrowser: any;

  constructor(
        public api:ApiProvider,
private route: ActivatedRoute,

  ) {

    this.postid = this.route.snapshot.paramMap.get('id');

   }



   getPostContent(){


      this.api.get('doctor/' + this.postid  ).subscribe((data) => {
        this.PostContent = data;


        });


  }



 ngOnInit() {

    this.getPostContent();
}


}

Answer 1

您需要为 iframe src 使用 DomSanitizer为此，您需要使用 Angular CLI 创建管道

ng generate pipe safe

打开safe.pipe.ts文件并粘贴以下代码:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}

 public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
  }
}

之后你只需要像这样使用安全管道:

<iframe src="{{PostContent.link | safe: 'url'}}"></iframe>