Question

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

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

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

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

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

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

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

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

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

Answer 1

想出来。

对任何有兴趣的人。问题是在我的html

中使用了这个功能

   [src]="getTrustedYouTubeUrl(item)"

在我的服务中加载数据并将iframe绑定更改为此

后，我更改了代码以计算安全URL时，重新加载副作用消失了

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

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

Answer 2

我会尝试将其与 pure pipe

一起使用

Angular仅在检测到纯粹的更改时执行纯管道输入值。纯粹的改变是对原始输入的改变 value（String，Number，Boolean，Symbol）或更改的对象引用（日期，数组，功能，对象）。

管道可能看起来像（ RC.6 - DomSanitizer 而不是 DomSanitizationService ）：

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

并将其用作以下内容：

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

Plunker Example（尝试按下按钮）

Answer 3

您可以保留原始解决方案，只需使用changeDetection: ChangeDetectionStrategy.OnPush

即可

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

Answer 4

结合以前的答案，让它以这种方式运作：

component.ts（仅相关部分）

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

template.html

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

Answer 5

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

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

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

由于使用sanitizer.bypassSecurityTrustResourceUrl而进行重新加载。因此，我们不应该使用它。我觉得比较舒服。谢谢。

网址清理导致刷新嵌入的YouTube视频

5 个答案: