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

Question

尝试在我的 Angular 应用程序中嵌入 YouTube 视频时，我有点进退两难。

我尝试使用 Angular 的 DomSanitizer 方法“bypassSecurityTrustResourceUrl()”，它确实正确显示了视频。但是 DOM 不断更新导致刷新，这显然会停止当前播放的视频。请查看该代码:

媒体组件.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'

安全管道.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()从 View 绑定(bind)。这样，每次更改检测运行时都会调用它。从代码计算它并将结果分配给一个字段并绑定(bind)到该字段，