ng2rc函数在angular2中无限调用

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);
}