Question

我真想弄清楚如何在iframe src中动态更改网址。我试过设置变量，然后使用字符串插值没有运气。

有关如何执行此操作的任何建议。如果可能的话，可能会举一些例子。

我正在尝试的示例代码；

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

谢谢。

Answer 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",
};

Answer 2

首先，确保您的属性在组件中是公共的。然后使用HTML中不带this的属性

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

Answer 3

第1步-在HTML页面中

import { of } from 'rxjs'; 
import { map, concatMap } from 'rxjs/operators';

const pretendGetCustomer = of({accountNumber: 123, name:"John Doe"});

const pretendGetVehiculeHttpRequest = (customerNumber) => {
  return of([{custNum: 123, vehicleId:"2"}, {custNum: 123, vehicleId:"1"}]);
}
const pretendGetCyclesHttpRequest = (cycleIds) => {
  return of([{id:"1", name:"yellow bike", retailPrice:"$10"}, {id:"2", name:"red bike", retailPrice:"$20"}]);
}

const yourFunction = () => {
  pretendGetCustomer.subscribe(customer => {
    // Assuming you do other things here with cust, reason why we are subscribing to this separately
    // isHappy(customer)

    // Your second & third calls
    pretendGetVehiculeHttpRequest(customer.accountNumber).pipe(
      // Need to use concatMap() to subscribe to new stream
      // Note: use mergeMap() if you don't need the 1st stream to be completed
      //       before calling the rest
      concatMap(purchases => {
        const cyclesIds = purchases.map(p => p.vehicleId);
        // concatMap() requires an Observable in return
        return pretendGetCyclesHttpRequest(cyclesIds).pipe(
          // Use map() here because we just need to use the data,
          // don't need to subscribe to another stream
          map(cycles=>{
            // Retrun whatever object you need in your subscription
            return {
              customerNumber: customer.accountNumber,
              customerName: customer.name,
              purchases: purchases.map(p => cycles.find(c => p.vehicleId === c.id))
            }
          })
        );
      })
    ).subscribe(resultof2and3 => {
      // Do something with the new/mutated Object which is a result of
      // your HTTP calls #2 and #3
      console.log(resultof2and3);
    });
  });
}

yourFunction();

第2步-在.TS文件中

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

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

iframe src属性作为动态Angular2的URL

3 个答案: