DOM 的一部分在 Angular 中不断刷新 5. 尝试从 YouTube 获取视频时 API
Part of the DOM continuously getting refreshed in Angular 5. While trying to fetch videos from YouTube API
在
中调用 Youtube API
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);
}
正在尝试对视频进行 url 清理
<li *ngFor= "let id of ytvideolist">
<iframe [src]="getEmbedUrl(id)" frameborder="0" allowfullscreen></iframe>
</li>
在函数 getEmbedUrl(id)
中使用 DOM 消毒剂
getEmbedUrl(id){
console.log(id);
return this.sanitizer.bypassSecurityTrustResourceUrl('https://youtube.com/embed/'+id);
}
一切正常,正在获取视频,但 DOM 的一部分不断刷新。我试图取消订阅所有组件生命周期挂钩。但如果我取消订阅,我将不会只获取任何结果。是否还有其他解决方法,或者我在这里遗漏了一些东西!
使用管道解决了问题
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}`);
}
}
里面 html 做了这样的事情
<div *ngFor= "let videoId of ytvideolist" class="shadow1">
<iframe [src]="videoId | youtubeSafeUrl" frameborder="0" allowfullscreen></iframe>
</div>
我猜订阅有问题。无论如何它解决了!
我希望它能帮助别人。
在
中调用 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+""
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);
}
正在尝试对视频进行 url 清理
<li *ngFor= "let id of ytvideolist">
<iframe [src]="getEmbedUrl(id)" frameborder="0" allowfullscreen></iframe>
</li>
在函数 getEmbedUrl(id)
中使用 DOM 消毒剂 getEmbedUrl(id){
console.log(id);
return this.sanitizer.bypassSecurityTrustResourceUrl('https://youtube.com/embed/'+id);
}
一切正常,正在获取视频,但 DOM 的一部分不断刷新。我试图取消订阅所有组件生命周期挂钩。但如果我取消订阅,我将不会只获取任何结果。是否还有其他解决方法,或者我在这里遗漏了一些东西!
使用管道解决了问题
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}`);
}
}
里面 html 做了这样的事情
<div *ngFor= "let videoId of ytvideolist" class="shadow1">
<iframe [src]="videoId | youtubeSafeUrl" frameborder="0" allowfullscreen></iframe>
</div>
我猜订阅有问题。无论如何它解决了! 我希望它能帮助别人。