如何在html表格行中向iframe添加动态纬度和经度

Question

在 angular.js 中，我正在尝试使用代码 iram 谷歌地图

<tr><td><iframe id="myIframe" src="https://maps.google.com/maps?q={{rfq.latitude}},{{rfq.longitude}}&hl=es;z=14&amp;output=embed" width="100%" height="450" frameborder="0"></iframe></td></tr>

但我收到{{rfq.latitude}} and {{rfq.longitude}} 的错误，如何在我的表格行中连接 iFrame 中的 url 字符串

Answer 1

您可以尝试使用 Angular DomSanitizer 清理 URL。这是一个快速管道

safe.pipe.ts

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

@Pipe({
  name: "safe",
  pure: true
})
export class SafePipe implements PipeTransform {
  constructor(protected sanitizer: DomSanitizer) {}

  public transform(value: any): SafeResourceUrl {
    console.log(`Pipe Called!`);
    return this.sanitizer.bypassSecurityTrustResourceUrl(value);
  }
}

app.component.ts

export class AppComponent {
  rfq = {
    latitude: 43.182233,
    longitude: -72.167288
  };
}

app.component.html

<table>
  <tr>
    <td>
      <iframe id="myIframe"
        [src]="'https://maps.google.com/maps?q='+rfq.latitude+','+rfq.longitude+'&hl=es;z=14&amp;output=embed' | safe"
        width="100%" 
        height="450" 
        frameborder="0"
      ></iframe>
    </td>
  </tr>
</table>

工作示例：Stacblitz