iframe src 属性作为动态 Angular2 的 URL

Question

我花了很长时间试图弄清楚如何动态更改 iframe src 中的 URL。我尝试设置变量，然后使用字符串插值，但没有成功。

关于我如何做到这一点的任何建议。如果可以的话，也许可以举一些例子。

我正在尝试的示例代码；

src="https://www.wheehouse.org/company/PriceMin={{ this.itemMinimum }}&PriceMax={{ this.itemMaximum }}&BedRange={{ this.itemBedRoomType }}-0&BathRange={{ this.itemBathType }}-0"

谢谢。

Answer 1

第 1 步 - 在 HTML 页面中 - 示例字符串可以是 html、url、style、script 等

[src] = "exampleString | safe: 'url'"

第 2 步 - 创建安全管道

安全管道规范

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

@Pipe({ name: "safe" })
export class SafePipe implements PipeTransform {
    constructor(private 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}`);
        }
    }
}    

注意： - 就安全管道而言，您必须实现它才能阻止 DOMSanitizer 从您的 URL 中删除内容。

请检查以下网址以了解如何实施安全管道。关联

Answer 2

第 1 步：HTML 文件

<div *ngIf="softwareWorkingVideoLink">
    <iframe
      width="700"
      height="350"
      [src]="transform()"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
  </div>

第2步：.Ts文件

import { Component } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { environment } from "../../../../environments/environment";
@Component({
  selector: "app-application-tour",
  templateUrl: "./application-tour.component.html",
})
export class ApplicationTourComponent {
  softwareWorkingVideoLink: string = environment.softwareWorkingVideoLink;

  constructor(private sanitizer: DomSanitizer) {}
  transform() {
    return this.sanitizer.bypassSecurityTrustResourceUrl(
      this.softwareWorkingVideoLink
    );
  }
}

步骤3：环境.ts

export const environment = {
  softwareWorkingVideoLink: "https://www.youtube.com/embed/JtvguK_hpIA",
};