尝试使用 SafePipe 清理嵌入的 Youtube 视频时出错

Error attempting SafePipe to Sanitize Embed Youtube Videos

我在尝试将 YouTube 视频嵌入我的 Angular 应用程序时遇到了一些难题。

我试过使用 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 刷新的任何建议?

不要从视图绑定中调用 sanitizeVideo()。这样每次运行更改检测时都会调用它。从代码中计算它并将结果分配给一个字段并绑定到该字段,