import { Component } from '@angular/core';

@Component({
  selector: 'exe-app',
  template: `
    <iframe [src]="iframe"></iframe>  
  `
})
export class AppComponent {
  iframe: string;
  constructor() {
    this.iframe = "https://www.jianshu.com/";       
  }
}

以上代码运行后，在浏览器中无法正常显示内容，控制台中输出了以下异常信息，因为有需要引入外部url的资源链接，但是，变量直接赋值url的话，会报错：
EXCEPTION: Error in ./AppComponent class AppComponent - inline template:1:12 caused by: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

主要是安全原因，Angular会认为你你赋值的url不安全（有兴趣可以了解一下跨站脚本Cross-site scripting，通常简称为XSS）。

解决方法：

DomSanitizer - bypassSecurityTrustHtml() 方法

DomSanitizer通过清理值以在不同的DOM上下文中安全使用来帮助防止跨站点脚本安全漏洞（XSS）。

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

@Component({
  selector: 'exe-app',
  template: `
 <iframe [src]="iframe"></iframe>  
  `
})
export class AppComponent {
  iframe: string;
  constructor(private sanitizer: DomSanitizer) {
    this.iframe= this.sanitizer.bypassSecurityTrustHtml('https://www.jianshu.com/');   
  }
}

参考资源

https://www.angular.cn/api

哪里有不明确或者错误，欢迎给我留言！

我相信路飞最后一定会和女帝在一起的😊