我的AngularJS2应用程序有问题(我使用的是AngularJS2的RC5版本).似乎一个经过清理的URL正在触发更改检测,然后它会更新下面的div,尽管我的组件状态没有任何更改.

从用户的Angular 来看,这表现为视频播放时的重新加载.

因此,在我的组件视图中,我有:

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

上述函数在组件代码中的实现为:

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

在debugger中,我看到div经常被刷新,这是由AngularJS 2框架触发的.

如果我用硬编码的URL替换上面的HTML片段,问题就会消失:

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

所以我怀疑是URL清理造成的.

谁能给我指出正确的方向吗?一个嵌入式YouTube视频的工作示例,其URL绑定到组件上的某个属性?

推荐答案

我想通了.

任何感兴趣的人.问题是在我的html中使用了这个函数

   [src]="getTrustedYouTubeUrl(item)"

当数据加载到我的服务中时,我更改了代码以计算安全url,并将iframe绑定更改为该url时,重新加载的副作用就消失了

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

请注意,R I现在绑定到一个属性.

Angular相关问答推荐

将Angular Metal的芯片组件集成到我的表单中时出错

Angular 16路卫单元测试可观察到的SpyObj属性

如何在Angular 17中使用Angular—calendum?

RXJS运算符用于combineLatest,不含空值

Angular 空变量使用组件之间的共享服务

笔刷Angular 为17

要素存储更改根存储状态

以Angular 动态添加和删除组件形状元素

Angular 17多内容投影错误

RxJS轮询+使用退避策略重试

没有调用订阅的原因是什么?

Angular JWT Token 被添加到lazyUpdate 而不是 HttpHeaders 中的标头

使用directive指令将类添加到host元素中

如何在Angular2中基于特定的构建环境注入不同的服务?

即使 withCredentials 为真,Angular 也不会发送在 Set-Cookie 中收到的 Cookie

Angular 2在单击子项时防止单击父项

Angular 5 手动导入语言环境

Angular2 中的providers提供者是什么意思?

Angular 2:为什么在检索路由参数时使用 switchMap?

在渲染视图/模板之前等待 Angular 2 加载/解析模型