Javascript URL清理导致嵌入式YouTube视频刷新

我的AngularJS 2应用程序有问题（我使用的是AngularJS 2的RC5版本）。似乎一个经过清理的URL正在触发更改检测，然后更新下面的

div

，尽管我的组件状态没有任何更改

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

因此，在我的组件视图中，我有：

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

在调试器中，我看到div经常被刷新，这是由AngularJS2框架中触发的某个事件引起的

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

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

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

---

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

我会尝试将其与一起使用

Angular仅在检测到管道的纯更改时才执行纯管道 输入值。纯更改是对原始输入的更改 值（字符串、数字、布尔值、符号）或已更改的对象引用 （日期、数组、函数、对象）

管道可能看起来像（RC.6-domsanizizer变成而不是domsanizationservice）：

并按如下方式使用：

<iframe [src]="url | safe" frameborder="0" allowfullscreen></iframe> 

（试着按下按钮）

找到了答案

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

   [src]="getTrustedYouTubeUrl(item)"

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

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

---

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

您可以保留原始解决方案，只需使用

changeDetection:ChangeDetectionStrategy.OnPush

---

结合前面的答案，以这种方式工作：

component.ts（仅适用于相关零件）

template.html

<iframe      
  [src]='this.safeUrl'>
</iframe>

@ViewChild（'ytplayer'，null）ytplayer:ElementRef；
恩戈尼尼特（）{
this.ytPlayer.nativeElement.src=this.act.iframe；
}

由于使用sanitizer.bypassSecurityTrustResourceUrl，会发生重新加载。 所以我们不应该使用它。 我觉得比较舒服。

---

谢谢。

谢谢，我试试看。我已经找到了另一种解决方法，但这似乎是一个有趣的想法。无法获取/SafeValue%20must%20use%20[property]=绑定：%20https://www.youtube.com/embed/wyVM1evRxNw%20（见%20）http://g.co/ng/securityNice 解决方案！Plunker由于某些原因无法工作，这里是一个最新版本（使用Angular v4.2.3）@istibekesi谢谢。我修复了plunkerGood solution我喜欢它。angular 5中的工作就像一个符咒。Thx在使用[src]=“sanitizer.bypassSecurityTrustResourceUrl（this.Url）”几个月后，同样的问题突然出现在我面前。我不知道它为什么会启动（angular 4.4，并且没有更新它）。但是，您的解决方案解决了它。谢谢！@Anthony您到底是如何解决它的？我现在有同样的问题，我使用Angular 2。我也使用[src]=“sanitizer.bypassSecurityTrustResourceUrl（this.Url），但是当我将src绑定到属性时，我得到了“错误：需要一个安全的ResourceURL，得到了一个Url（请参阅）”消息。@handris请参见上面的答案。加载数据时，您是如何更改计算安全url的代码的？我无法解决此问题：（正是我所需要的…此方法应用程序只允许消毒器运行一次。此问题通过我的自动闪烁谷歌地图得到解决。谢谢谢谢，它对我有效

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

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

import { DomSanitizer } from '@angular/platform-browser';

constructor( 
  private sanitizer: DomSanitizer   
) {
  this.sanitizer = sanitizer;
}

ngOnInit() {
 this.getTrustedUrl('http://someUrl');
}

getTrustedUrl(url:any){ 
 this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

<iframe      
  [src]='this.safeUrl'>
</iframe>

<iframe #ytplayer  width="100%" height="235" frameborder="0" src="">
</iframe>    

@ViewChild('ytplayer', null) ytPlayer: ElementRef;

ngOnInit() {
  this.ytPlayer.nativeElement.src = this.act.iframe;
}