部分 DOM 在 Angular 5 中不断刷新.尝试从 YouTube API 获取视频时 [英] Part of the DOM continuously getting refreshed in Angular 5. While trying to fetch videos from YouTube API
问题描述
在
中调用Youtube APIngOnInit(){var finalURL = "https://www.googleapis.com/youtube/v3/search?key="+this.api+"&channelId="+this.chanId+"&part=snippet,id&order=date&maxResults="+this.result+""控制台日志(finalURL);this.obser$ = this.http.get(finalURL).subscribe(response=>{控制台日志(响应);让 ytresults= response.json();控制台日志(ytresults);ytresults.items.forEach(obj => {控制台日志(obj.id.videoId);this.ytvideolist.push(obj.id.videoId);});console.log(this.ytvideolist);}
尝试在这里对视频网址进行消毒
<iframe [src]="getEmbedUrl(id)" frameborder="0" allowfullscreen></iframe>
在函数 getEmbedUrl(id) 中使用 DOM sanitizer
getEmbedUrl(id){控制台日志(ID);return this.sanitizer.bypassSecurityTrustResourceUrl('https://youtube.com/embed/'+id);}
一切正常,视频正在获取,但部分 DOM 不断刷新.我尝试取消订阅所有组件生命周期挂钩.但是如果我取消订阅,我将不会只获取任何结果.有没有其他解决方法,或者我在这里遗漏了什么!
解决了使用管道的问题
import { Pipe, PipeTransform } from '@angular/core';从@angular/platform-browser"导入 {DomSanitizer, SafeResourceUrl};@管道({名称:'youtubeSafeUrl'})导出类 YoutubePipe 实现 PipeTransform {构造函数(私有消毒剂:DomSanitizer){}变换(视频ID:字符串):SafeResourceUrl {返回 this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${videoId}`);}}
在html里面做了这样的事情
<iframe [src]="videoId | youtubeSafeUrl" frameborder="0" allowfullscreen></iframe>
我在猜测订阅有问题.无论如何它解决了!我希望它可以帮助某人.
Calling Youtube API in
ngOnInit(){
var finalURL = "https://www.googleapis.com/youtube/v3/search?key="+this.api+"&channelId="+this.chanId+"&part=snippet,id&order=date&maxResults="+this.result+""
console.log(finalURL);
this.obser$ = this.http.get(finalURL).subscribe(response=>{
console.log(response);
let ytresults= response.json();
console.log(ytresults);
ytresults.items.forEach(obj => {
console.log(obj.id.videoId);
this.ytvideolist.push(obj.id.videoId);
});
console.log(this.ytvideolist);
}
trying here to make the video url sanitized
<li *ngFor= "let id of ytvideolist">
<iframe [src]="getEmbedUrl(id)" frameborder="0" allowfullscreen></iframe>
</li>
Using DOM sanitizer in the function getEmbedUrl(id)
getEmbedUrl(id){
console.log(id);
return this.sanitizer.bypassSecurityTrustResourceUrl('https://youtube.com/embed/'+id);
}
Everything is working fine videos are getting fetched but part of the DOM continuously getting refreshed. I tried to do unsubscribe at all the component lifecycle hooks. But If I unsubscribe I won't fetch any results only. Is there any other work-around or am I missing some thing here!
Solved the problem using pipe
import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
@Pipe({
name: 'youtubeSafeUrl'
})
export class YoutubePipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer){
}
transform(videoId: string): SafeResourceUrl {
return this.sanitizer.bypassSecurityTrustResourceUrl(
`https://www.youtube.com/embed/${videoId}`);
}
}
Inside html did something like this
<div *ngFor= "let videoId of ytvideolist" class="shadow1">
<iframe [src]="videoId | youtubeSafeUrl" frameborder="0" allowfullscreen></iframe>
</div>
I was guessing problem with subscription. anyhow it resolved! I hope it helps somebody.
这篇关于部分 DOM 在 Angular 5 中不断刷新.尝试从 YouTube API 获取视频时的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!