前段时间在做项目的时候，给项目嵌入了一个第三方的ai链接，之前写成一个死的链接，测试都正常，但是后期迭代的时候将链接后面动态添加了一个参数，发现iframe不出来，并且查看dom结构，直接src对应的属性都没了，经过一顿研究发现原因是因为angular会会自帮我们清除和转义不受信任的值。

通过使用DomSanitizer可以解决此问题，

import { Component, OnInit } from '@angular/core';
import { NzModalService } from "ng-zorro-antd/modal";
import {LocalStorage} from "../../../utils/localstorage";
import {DomSanitizer} from "@angular/platform-browser";

@Component({
  selector: 'app-ai001',
  templateUrl: './ai001.component.html',
  styleUrls: ['./ai001.component.styl']
})
export class Ai001Component implements OnInit {
  


  info: any={
  }
  iframeUrl;
  constructor(private modal: NzModalService,private sanitizer:DomSanitizer) {
  }
  
  ngOnInit(): void {
    this.iframeUrl = this.getUrl();
  }
  // src
  getUrl() { 
    this.info = LocalStorage.getInfoObject();
    return this.sanitizer.bypassSecurityTrustResourceUrl(`***?shareId=${this.info.shareId}`);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(`/share?scene=${id}`);
  }
  


}

<iframe
  allow="fullscreen;microphone"
  title="FastGPT Chat Window"
  id="fastgpt-chatbot-window"
  [src]="iframeUrl"
  style="
    border: none;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 2147483647;
    overflow: hidden;
  "
></iframe>