angular 中嵌套 iframe 報錯

錯誤以下

Error: unsafe value used in a resource URL context
at DomSanitizationServiceImpl.sanitize...

解決

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

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
} 

經過過濾器來解決 

使用

<iframe width="100%" height="300" [src]="url | safe"></iframe>