部分 DOM 在 Angular 5 中不断刷新.尝试从 YouTube API 获取视频时

Question

在

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 的一部分不断刷新。我尝试在所有组件生命周期钩子上取消订阅。但是如果我取消订阅，我不会只获取任何结果。还有其他解决方法吗，或者我在这里错过了一些东西！

Answer 1

使用管道解决了问题

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>  

我猜订阅有问题。 无论如何，它解决了！我希望它能帮助到某人。