将选定的视图传递给主玩家角/Youtube

Question

所以今天我试着完成一个我坐了一段时间的角度项目。它是一个模拟YouTube应用程序，使用youtubes来获取一个显示资源。我似乎无法通过从视频列表发送我的视频到主要玩家。我的服务很好。当我做一个搜索，我的视频列表是更新和渲染。我正在处理的问题是将选定的视频传递给主播放器。任何线索。谢谢各位

像往常一样，任何让这件事变得更容易理解的提示/建议都将被采纳。

这是我的Youtube组件

@Component({
  selector: 'app-video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent implements OnInit {
  @Input() thumbnail!: any;
  @Input() title!: any;
  @Output() newVideos: EventEmitter<any> = new EventEmitter();

  hi:string = "Video Name"
  title2:any = "Description"
  videos: VideoObject[];
  constructor(private youtubeservice: YouTubeService) { }

  ngOnInit(): void {
    console.log("YOUTUBE PLAYER COMPONENT", this.title)
    
  }

Youtube主要玩家

 <youtube-player 
    videoId="k5E2AVpwsko" 
    id="size" 
 >

</youtube-player>
        {{ hi }}
        <h5>{{ title}}</h5>
        {{ title2}}
    </div>

我的视频列表组件..。我想把选定的视频传递给疼痛播放器

@Component({
  selector: 'app-video-list',
  templateUrl: './video-list.component.html',
  styleUrls: ['./video-list.component.css']
})
export class VideoListComponent implements OnInit {
videos!:VideoObject[];

constructor(private youtubeservice: YouTubeService) { }

  ngOnInit() {
  
    this.youtubeservice.getVids("Sesame Street").subscribe((results:any) =>{
     this.videos = results;
      console.log("List Component ", this.videos)
     });

     
  }
  updateVids(vid:VideoObject){
    this.youtubeservice.updateVids(vid).subscribe((results:any) => {
      this.videos = results;
      console.log("FROM VIDEO LIST", this.videos)
    })
  }
  
}

视频列表模板

<app-search (searchVideos)="updateVids($event)"> </app-search>
<div>
  <app-video-list-entry
    *ngFor="let vid of videos"
    [thumbnail]="vid.snippet.thumbnails.default.url"
    [title]="vid.snippet.title"
    [channelId]="vid.snippet.channelId"
    [channelUrl]="vid.id.videoId"
  >
  </app-video-list-entry>
</div>

Answer 1

VideoListEntry组件的单击处理程序可以让父组件将channelUrl传递给它。将channelUrl保存在组件状态，如果<youtube-player>组件位于同一组件中，只需将Url传递给<youtube-player>