iframe src 属性作为 URL 动态 Angular2

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

首先，确保您的属性在组件中 public。然后使用 html

中没有 this 的属性

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

Answer 2

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

}

Answer 3

第 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 步：environment.ts

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

iframe src 属性作为 URL 动态 Angular2

iframe src property as a URL dynamically Angular2

html

iframe

angular

ionic4

iframe src 属性 作为 URL 动态 Angular2

iframe src property as a URL dynamically Angular2

html

iframe

angular

ionic4

iframe src 属性作为 URL 动态 Angular2