URLサニタイズが埋め込みYouTubeビデオの更新を引き起こしています

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フレームワークでトリガーされたものによって。私はハードコーディングされたURLと上記のHTMLスニペットを置き換える場合

問題は、消える：

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

は、だから私は、URLのサニタイズがそれを引き起こしていることを疑っています。

誰でも正しい方向に向けることができますか？コンポーネントのプロパティにURLがバインドされている埋め込みYouTube動画の実例？

Answer 1

はそれを考え出しました。

興味のある方は、問題は、データが私のサービスにロードされ、この

にiframeの結合を変更されたとき、私は安全なURLを計算するコードを変更したら、リロード副作用が消えていた私のhtmlでこの機能を使用する

[src]="getTrustedYouTubeUrl(item)" 

ました

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

私は今プロパティにバインドしています。

Answer 2

私はpure pipe

でそれを使用しよう

Angular executes a pure pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).

パイプ（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

あなたはあなたの元の溶液を維持し、ちょうどそれがこのよう作業を取得するために

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

Answer 4

changeDetection: ChangeDetectionStrategy.OnPushが前の回答を合わせて使用​​することができます。

コンポーネントを。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>