在angular2中无限调用的ngSrc函数

Question

为了在iframe中加载youtube影片，我的模板中包含以下内容：

<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不变的时候)。结果是无法加载视频。这里会有什么问题呢？

Answer 1

Angulars变更检测在每次运行变更检测时都会调用该方法，这通常是相当频繁的。这就是不鼓励绑定到函数或方法的原因。

相反，将函数或方法的结果分配给属性，并从视图绑定到此属性。

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

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