资源 URL 上下文中使用的不安全值：Angular DomSanitizer答案

【问题标题】：unsafe value used in a resource URL context : Angular DomSanitizer资源 URL 上下文中使用的不安全值：Angular DomSanitizer
【发布时间】：2021-05-19 19:19:29
【问题描述】：

我正在尝试在其中包含 iFrame 的组件中嵌入动态谷歌地图 URL，但我收到错误 unsafe value used in a resource URL context。这是我尝试使用DomSanitizer 的方法，但问题仍然存在

<iframe src="{{mapURL}}" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>

在我的 component.ts 中

import { DomSanitizer, SafeResourceUrl, } from '@angular/platform-browser';

mapURL: SafeResourceUrl

constructor( public sanitizer: DomSanitizer) { }

var url = "https://maps.google.com/maps?q="
      + this.tenant.latitude
      + ","
      + this.tenant.longitude
      + "&hl=es;z=14&amp;output=embed";
this.mapURL = this.sanitizer.bypassSecurityTrustResourceUrl(url);

【问题讨论】：

标签： angular typescript

【解决方案1】：

尝试像这样更改您的 html。

<iframe [src]="mapURL" width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>

对我有用，请查看https://stackblitz.com/edit/angular-ivy-g4q9d8?file=src/app/app.component.html

【讨论】：