URL清理导致刷新嵌入的YouTube视频 [英] URL sanitization is causing refresh of the embedded YouTube video

问题描述

我的AngularJS 2应用程序有问题（我使用的是AngularJS 2的RC5版本）。似乎已清理的URL正在触发更改检测，然后更新 div ，尽管组件状态没有任何变化。

I have a problem with my AngularJS 2 app (I am using RC5 version of AngularJS 2). It seems that a sanitized URL is triggering change detection which then updates the div below despite not having any changes in my component state.

从用户的角度来看，这表现为视频在播放时的重新加载。

From user point of view this manifests itself as reload of the video while it is playing.

所以在我的组件视图中我有：

So in my component view I have:

<div *ngIf="isVideo(item)">
   <iframe [src]="getTrustedYouTubeUrl(item)" scrolling="no" frameborder="0" allowfullscreen></iframe>          
</div>

上面组件代码中函数的实现是：

The implementation of the function above in the component code is:

getTrustedYouTubeUrl(linkedVideo:LinkedVideoModel) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(linkedVideo.video.url);
}    

在调试器中，我看到div经常被触发的东西刷新AngularJS 2框架。

In debugger I see that the div gets refreshed quite often, by something triggered in AngularJS 2 framework.

如果我用硬编码的URL替换上面的HTML代码段，问题就会消失：

The issue goes away, if I replace the HTML snippet above with a hard-coded URL:

<div *ngIf="isVideo(item)">
   <iframe src="<hardcoded youtube url here>" scrolling="no" frameborder="0" allowfullscreen></iframe>          
</div> 

所以我怀疑网址清理是否导致它。

So I am suspecting that URL sanitization is causing it.

有人能指出我正确的方向吗？一个嵌入式YouTube视频的工作示例，其URL可以绑定到组件上的属性吗？

Can anyone point me in the right direction? A working example of embedded YouTube videos that have their URL bound to a property on the component maybe?

推荐答案

想出来。

对于任何有兴趣的人。问题是我的html中使用了这个函数

For anyone interested. The problem was the use of this function in my html

   [src]="getTrustedYouTubeUrl(item)"

在我的服务中加载数据并更改数据后，当我更改代码以计算安全URL时，重新加载副作用消失了iframe绑定到此

The reload side effect was gone once I changed the code to calculate the safe url when the data is loaded in my service and changed the iframe binding to this

    <iframe [src]="item.video.safeUrl" scrolling="no" frameborder="0" allowfullscreen></iframe>    

注意我现在绑定到一个属性。

Note thatr I am now binding to a property.

这篇关于URL清理导致刷新嵌入的YouTube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！