Question

尝试在我的Angular应用程序中嵌入YouTube视频时，我遇到了一些困境。

我尝试过使用Angular的DomSanitizer方法＆＃34; bypassSecurityTrustResourceUrl（）＆＃34;，它确实正确地显示了视频。但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()。这样，每次更改检测运行时都会调用它。从代码中取出它并将结果分配给字段并改为绑定到该字段，

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

1 个答案: