在angular2

無限叫爲了在一個iframe加載YouTube視頻ngSrc功能，我有我的模板如下：在angular2

<iframe [src]="getYouTubeUrl(currentItem.id)" frameborder="0" allowfullscreen></iframe>

在我所定義的組件：

getYouTubeUrl(id:string):SafeResourceUrl { 
    let url:string = `https://www.youtube.com/embed/${id}`; 
    return this.sanitizer.bypassSecurityTrustResourceUrl(url); 
}

不知何故，這個函數被無限調用（而生成的url不會改變）。結果是視頻無法加載。這裏有什麼可能是錯的？

來源

2016-10-03 dndr

使用純管代替。另請參閱http://stackoverflow.com/questions/38037760/how-to-set-iframe-src-in-angular-2-without-causing-unsafe-value-exception/38037914#38037914和github上的問題https：/ /github.com/angular/angular/issues/11518 – yurzui

謝謝，這個工程！ :)我不知道爲什麼更改檢測沒有管道而是多次運行，但只有一次使用管道？難道是因爲現在函數返回一個字符串（url），它是一個基元，而不是SafeResourceUrl，它不是一個原始的？ – dndr

僅當管道檢測到對輸入值的純粹更改時纔會執行純管道。另一方面，模板中的函數將調用每個'Application.tick'。http://stackoverflow.com/questions/39757603/unraveling-angular-2-book-chapter-1-example-5/39761822#39761822 – yurzui

每次運行變更檢測時，角度變化檢測都會調用該方法，這通常很常見。這就是阻止綁定函數或方法的原因。

相反，將函數或方法的結果賦值給一個屬性，並從該視圖綁定到該屬性。

<iframe [src]="youTubeUrl" frameborder="0" allowfullscreen></iframe>

ngOnInit() { 
    this.youTubeUrl = getYouTubeUrl(this.currentItem.id); 
}

來源

2016-10-03 14:21:02

如果我用[src]的函數在圖像列表上使用重複器（ngFor）？ – alex351

相同。不要綁定函數。準備一個包含每個項目結果的新數組（或將數據添加到「圖像列表」），然後綁定到該數組。 –

良好的通話，謝謝。 – alex351

回答

相關問題