在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

回答

相关问题