尝试使用 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()
。这样每次运行更改检测时都会调用它。从代码中计算它并将结果分配给一个字段并绑定到该字段,
我在尝试将 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()
。这样每次运行更改检测时都会调用它。从代码中计算它并将结果分配给一个字段并绑定到该字段,