嘗試使用SafePipe清理嵌入Youtube視頻時出錯

Question

嘗試在我的Angular應用程序中嵌入YouTube視頻時，我有點困惑。

我曾嘗試使用Angular的DomSanitizer方法「bypassSecurityTrustResourceUrl（）」，並且確實正確顯示了視頻。但DOM不停地更新，導致刷新顯然會停止當前正在播放的視頻。請參閱該代碼：

media.component.ts

import { Component, OnInit, Injectable } from '@angular/core'; 
import { AngularFire } from 'angularfire2'; 
import { DomSanitizer } from '@angular/platform-browser'; 

import { VideoService } from '../../../services/videos/video.service'; 

@Component({ 
    selector: 'app-media', 
    templateUrl: './media.component.html', 
    styleUrls: ['./media.component.css'] 
}) 

@Injectable() 
export class MediaComponent implements OnInit { 

    videos = []; 

    constructor(public af: AngularFire, 
       private videoService: VideoService, 
       private sanitizer: DomSanitizer) {} 


    getVideos() { 
    this.videoService.getVideos().subscribe((data) => { 
     this.videos = data; 
    }); 
    } 

    sanitizeVideo(index: number) { 
    return this.sanitizer.bypassSecurityTrustResourceUrl(this.videos[index].videoUrl); 
} 

    ngOnInit() { 
    this.getVideos(); 
    } 

media.component.html

<div class="container" *ngIf="videos"> 
    <h1 class="my-4">Videos 
    <small>More to come</small> 
    </h1> 
<br><br> 
    <div *ngFor="let video of videos; let i = index"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <a href="#"> 
      <iframe width="560" height="315" [src]= "sanitizeVideo(i)" frameborder="5" allowfullscreen></iframe> 
     </a> 
     </div> 
     <div class="col-md-5"> 
     <h3>{{ video.videoTitle }}</h3> 
     <p>{{ video.videoDescription }}</p> 
     </div> 
    </div> 
    <hr> 
    </div> 
</div> 

---

所以我發現使用管道，以避免更多信息刷新問題。然而，創建以下錯誤：

error_handler.js:60 Error: Uncaught (in promise): Error: Cannot match any 
routes. URL Segment: 'null' 
Error: Cannot match any routes. URL Segment: 'null' 

safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; 
import {DomSanitizer} from '@angular/platform-browser'; 

@Pipe({ 
    name: 'safe' 
}) 
export class SafePipe implements PipeTransform { 

    constructor(private sanitizer: DomSanitizer) {} 

    transform(url) { 
    return this.sanitizer.bypassSecurityTrustResourceUrl(url); 
    } 

} 

media.component.html

<div class="container" *ngIf="videos"> 
    <h1 class="my-4">Videos 
    <small>More to come</small> 
    </h1> 
<br><br> 
    <div *ngFor="let video of videos"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <a href="#"> 
      <iframe width="560" height="315" [src]= "video.videoUrl | safe" frameborder="5" allowfullscreen></iframe> 
     </a> 
     </div> 
     <div class="col-md-5"> 
     <h3>{{ video.videoTitle }}</h3> 
     <p>{{ video.videoDescription }}</p> 
     </div> 
    </div> 
    <hr> 
    </div> 
</div> 

上正確顯示嵌入YouTube視頻，而不會造成不變DOM任何意見刷新？

Answer 1

不要從視圖綁定中調用sanitizeVideo()。這種方式每次運行變更檢測時都會被調用。將它從代碼中刪除，並將結果分配給一個字段，並將其綁定到該字段，而不是將該結果綁定到該字段，