iframe src 属性作为 URL 动态 Angular2答案

【问题标题】：iframe src property as a URL dynamically Angular2iframe src 属性作为 URL 动态 Angular2
【发布时间】：2019-10-22 02:40:48
【问题描述】：

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

关于我如何做到这一点的任何建议。如果可以的话，可能会提供一些示例。

我正在尝试的示例代码；

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

谢谢。

【问题讨论】：

标签： html angular iframe ionic4

【解决方案1】：

第 1 步 - 在 HTML 页面中

[src] = "createURL() | safe: 'resourceURL'"

第 2 步 - 在 .TS 文件中

createURL() {
 //Create your URL
 // return your URL
}

注意： - 正如 Alexis 在评论中正确指出的那样，不建议在上面示例中使用的模板中使用函数调用。请根据您的需要修改代码。您始终可以直接使用字符串代替函数调用。我使用它只是为了使代码更清晰易懂。

注意： - 就安全管道而言，您必须实施它才能阻止 DOMSanitizer 从您的 URL 中删除内容。请查看以下 URL，了解如何实施安全管道。 Link

安全管道规范

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}`);
        }
  }

}

【讨论】：

感谢您对示例的帮助和描述性回答。非常感谢！
@Sushil 你用管道实现了 DOM Sanitizer 吗？
你不应该在你的模板中使用方法，你的导航器上的simple research会让你明白为什么。
@Alexis 我完全同意你的看法。它最初是为了演示目的而编写的。我们总是可以在那里直接绑定字符串。感谢您指出了这一点。我希望任何使用此示例的人在实施时都应牢记这一点。我也在答案中添加了一点。

【解决方案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",
};

【讨论】：

【解决方案3】：

首先，确保您的属性在组件中是公开的。然后在html中使用没有this的属性

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

【讨论】：

我试过了，但出现以下错误；错误：资源 URL 上下文中使用了不安全的值（请参阅g.co/ng/security#xss）
将其赋值给一个变量并从 html 中使用它