Angular 5 в safepipe get error - Требуется безопасный ResourceURL, есть HTML

Question

В Angular 5 я хочу показать карту в iFrame.Я использовал safepipe, однако получаю сообщение об ошибке в консоли

Требуется безопасный ResourceURL, получен HTML

Вот код моего .ts файла:

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

export class XXXComponent implements OnInit {
constructor(private sanitizer: DomSanitizer){}

this.mapURL = "https://www.google.com/maps/embed/v1/place?key=AIzaSyDdWRYxwcpnrJWXbsR4fmP3HwvsFlCMYPk&q=Ylistörmä+1,+02210+Espoo,+Finland&attribution_source=Google+Maps+Embed+API";
this.urlsafe = this.createSafeMap(this.mapURL);

createSafeMap(url){
  return this.sanitizer.bypassSecurityTrustHtml(url);
}

В файле .html я сделал следующее, чтобы показать карту в iframe:

<iframe [src]="urlsafe | safe: 'html'"></iframe>

Ниже приведено содержание safe.pipe.ts:

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 1

Чтобы безопасно использовать url, вам просто нужно написать safe pipe с параметром resourceUrl и выбросить обертку urlsafe:

[src]="mapURL | safe: 'resourceUrl'"