Fehler beim Versuch, SafePipe zu sanieren Einbetten von Youtube-Videos

Question

Ich habe ein kleines Dilemma beim Versuch, YouTube-Videos in meine Angular-Anwendung einzubetten.

Ich habe versucht, Angulars DomSanitizer-Methode "bypassSecurityTrustResourceUrl()" zu verwenden, und die Videos wurden ordnungsgemäß angezeigt. Aber das DOM wurde ständig aktualisiert, was zu Auffrischungen führte, die das gerade abgespielte Video stoppen würden. Bitte beachten Sie, dass Code:

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> 

---

So fand ich mehr Informationen über die Verwendung eines Rohres zu vermeiden das Aktualisierungsproblem. Doch das schafft die folgenden Fehler:

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> 

Jede Beratung über richtig angezeigt einbetten YouTube-Videos ohne ständigen DOM verursacht Aktualisierung?

Answer 1

Rufen Sie nicht sanitizeVideo() aus einer Ansicht Bindung. Auf diese Weise wird es jedes Mal aufgerufen, wenn die Änderungserkennung ausgeführt wird. Calk es aus Code und zuweisen Sie das Ergebnis zu einem Feld und binden Sie stattdessen an dieses Feld,