小編給大家分享一下angular中如何綁定iframe中src，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：主機域名、網絡空間、營銷軟件、網站建設、黃石港網站維護、網站推廣。

需求: 頁面中有一個網頁組件(由iframe編寫)，此iframe顯示在一個輸入框中，當修改輸入框中地址的時候，要求改變網頁組件中的內容

網頁組件中的代碼(html的部分)

網頁組件中的代碼(ts的部分)

...省略
export class DesignWebInputComponent implements OnInit{
  testUrl ;
}

此時問題出現(xiàn)了，頁面無法顯示內容

不要慌，有辦法可以解決

constructor( private sanitizer:DomSanitizer) {}

導入DomSanitizer 這個類 并使用其中的bypassSecurityTrustResourceUrl() 轉換url的格式 如下

 trustUrl(url: string) {
  if(url){
   return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
 }

html中

在這里寫了個trustUrl()轉換 testUrl 這樣就可以顯示了

總結: 使用 DomSanitizer 類中的 bypassSecurityTrustResourceUrl() 來轉換url

看完了這篇文章，相信你對“angular中如何綁定iframe中src”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網站名稱：angular中如何綁定iframe中src-創(chuàng)新互聯(lián)
URL鏈接：http://weahome.cn/article/ddepsi.html