html - 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

第 1 步 - 在 HTML 页面中 - 示例字符串可以是 html、url、样式、脚本等

[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 中删除内容。

请检查以下 URL 以了解如何实现安全管道。 Link