angular中如何綁定iframe中src的方法
更新時(shí)間：2019年02月01日 09:47:21 作者：YellRes
這篇文章主要介紹了angular中如何綁定iframe中src的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
需求: 頁面中有一個(gè)網(wǎng)頁組件(由iframe編寫)，此iframe顯示在一個(gè)輸入框中，當(dāng)修改輸入框中地址的時(shí)候，要求改變網(wǎng)頁組件中的內(nèi)容
網(wǎng)頁組件中的代碼(html的部分)
<iframe #Iframe [src]="testUrl" frameborder="0" width="100%" height="100%"> </iframe>
網(wǎng)頁組件中的代碼(ts的部分)
...省略
export class DesignWebInputComponent implements OnInit{
testUrl ;
}
此時(shí)問題出現(xiàn)了，頁面無法顯示內(nèi)容
不要慌，有辦法可以解決
constructor( private sanitizer:DomSanitizer) {}
導(dǎo)入DomSanitizer 這個(gè)類 并使用其中的bypassSecurityTrustResourceUrl() 轉(zhuǎn)換url的格式 如下
trustUrl(url: string) {
if(url){
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
html中
<iframe #Iframe [src]="trustUrl(testUrl)" frameborder="0" width="100%" height="100%"> </iframe>
在這里寫了個(gè)trustUrl()轉(zhuǎn)換 testUrl 這樣就可以顯示了
總結(jié): 使用 DomSanitizer 類中的 bypassSecurityTrustResourceUrl() 來轉(zhuǎn)換url
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法
今天小編就為大家分享一篇AngularJS中ng-options實(shí)現(xiàn)下拉列表的數(shù)據(jù)綁定方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
angular6的響應(yīng)式表單的實(shí)現(xiàn)
這篇文章主要介紹了angular6的響應(yīng)式表單的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
AngularJs根據(jù)訪問的頁面動(dòng)態(tài)加載Controller的解決方案
這篇文章主要介紹了AngularJs根據(jù)訪問的頁面動(dòng)態(tài)加載Controller的解決方案,需要的朋友可以參考下2015-02-02
這篇文章主要和大家一起學(xué)習(xí)Angular路由，介紹angular的$route的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Angular項(xiàng)目里ngsw-config.json文件作用詳解
這篇文章主要為大家介紹了Angular項(xiàng)目里ngsw-config.json文件作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要介紹了 AngularJS 所有版本下載地址的相關(guān)資料,需要的朋友可以參考下2016-09-09
angular + express 實(shí)現(xiàn)websocket通信
最近需要實(shí)現(xiàn)一個(gè)功能,后端通過TCP協(xié)議連接雷達(dá)硬件的控制器,前端通過websocket連接后端,當(dāng)控制器觸發(fā)消息的時(shí)候,把信息通知給所以前端,本文給的大家講解angular + express 實(shí)現(xiàn)websocket通信的思路,感興趣的朋友一起看看吧2023-09-09
這篇文章主要介紹了在Angular中利用trackBy來提升性能的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-01-01
Angular中$state.go頁面跳轉(zhuǎn)并傳遞參數(shù)的方法
這篇文章主要介紹了angular中$state.go頁面跳轉(zhuǎn)并傳遞參數(shù)的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-05-05
這篇文章主要介紹了Angular組件化管理實(shí)現(xiàn)方法,結(jié)合具體實(shí)例分析了Angular模塊組件化管理以提高代碼復(fù)用性的實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2017-03-03