Angular 如何用鼠标点击更新视频元素的src属性？

我有一个简单的应用程序，它有一个侧菜单的视频列表，右侧有一个播放器。出于某种原因，我为列表和视频播放器制作了单独的组件。我想要的是，当用户单击列表中的任何项目时，相应的视频应该在播放器中加载/播放。但是我无法更新

video

元素的

src

这是我的密码：

main-content.component.html

...
<mat-list *ngFor="let video of videos;let i = index">
  <button (click)="setloadVid(video)" type="button">{{video.title}}</button>
</mat-list>
...
//Selector for playing video
<app-play-video></app-play-video>
...

<div class="video-container video">
  <video width="400px" height="300px" controls (click)="toggleVideo()" #videoPlayer>
    <source [src]="src$ | async" type="video/mp4" /> Browser not supported
  </video>
</div>

。。。
{{video.title}
...
//用于播放视频的选择器
...

main.component.ts

videos;
obs = new Subject<string>();
obs$ = this.obs.asObservable();

constructor(private vid: VideosService) {}

ngOnInit() {
  this.videos = this.vid.VIDEOS;
  //this is just to make sure that that the first video loads when the page loads.
  this.obs.next("../../assets/secure-content/vid1.mp4");
}

setloadVid(video: any) {
  this.obs.next(video.src);
}

@Component({
  selector: 'app-play-video',

...

src$: Observable<string>;

constructor(private mainContPg: MainContentComponent) { }

ngOnInit() {
  this.src$ = this.mainContPg.obs$;
}

视频；
obs=新主题（）；
obs$=this.obs.asObservable（）；
构造函数（私有视频：视频服务）{}
恩戈尼尼特（）{
this.videos=this.vid.videos；
//这只是为了确保在加载页面时加载第一个视频。
this.obs.next（“../../assets/secure content/vid1.mp4”）；
}
setloadVid（视频：任意）{
this.obs.next（video.src）；
}

我的播放器组件：

play-video.component.html

...
<mat-list *ngFor="let video of videos;let i = index">
  <button (click)="setloadVid(video)" type="button">{{video.title}}</button>
</mat-list>
...
//Selector for playing video
<app-play-video></app-play-video>
...

<div class="video-container video">
  <video width="400px" height="300px" controls (click)="toggleVideo()" #videoPlayer>
    <source [src]="src$ | async" type="video/mp4" /> Browser not supported
  </video>
</div>

不支持浏览器

play-video.component.ts

videos;
obs = new Subject<string>();
obs$ = this.obs.asObservable();

constructor(private vid: VideosService) {}

ngOnInit() {
  this.videos = this.vid.VIDEOS;
  //this is just to make sure that that the first video loads when the page loads.
  this.obs.next("../../assets/secure-content/vid1.mp4");
}

setloadVid(video: any) {
  this.obs.next(video.src);
}

@Component({
  selector: 'app-play-video',

...

src$: Observable<string>;

constructor(private mainContPg: MainContentComponent) { }

ngOnInit() {
  this.src$ = this.mainContPg.obs$;
}

@组件({
选择器：“应用程序播放视频”，
...
src$：可观察的；
构造函数（私有mainContPg:MainContentComponent）{}
恩戈尼尼特（）{
this.src$=this.mainContPg.obs$；
}

---

如何修复此问题？谢谢！

设置第二个组件的输入

<button (click)="currentVideo = video" type="button">{{video.title}}</button>
...
<app-play-video [video]="currentVideo"></app-play-video>

videos;
currentVideo;

在第二个组件中，也声明它

@Input() video;

执行

OnChanges

界面以更改视频源

export class PlayVideoComponent implement onChanges {
  ...
  src;
  ngOnChanges(changes: SimpleChanges) {
    this.src = this.video.src;
  }
  ...
}

并删除HTML的异步部分

<source [src]="src" type="video/mp4" /> Browser not supported

浏览器不受支持

问题在于模板中调用的async只执行一次。请在我的播放器组件中处理它。同时使用BehaviorSubject并将第一个视频设置为默认

视频

obs = new BehaviorSubject<string>('../../assets/secure-content/vid1.mp4');
obs$ = this.obs.asObservable();

obs=newbehaviorsubject（'../../assets/secure content/vid1.mp4'）；
obs$=this.obs.asObservable（）；

组成部分：

@Component({
  selector: 'app-play-video',

...

src$: Observable<string>;

constructor(private mainContPg: MainContentComponent) { }

ngOnInit() {
  this.mainContPg.obs$.subscribe((vsrc)=>{
    this.src = vsrc;
  });
}

@组件({
选择器：“应用程序播放视频”，
...
src$：可观察的；
构造函数（私有mainContPg:MainContentComponent）{}
恩戈尼尼特（）{
this.mainContPg.obs$.subscribe（（vsrc）=>{
this.src=vsrc；
});
}

您可以通过播放视频中的数据绑定传递src，在ngOnChage上您将获得新的src。在服务中添加

主题

，而不是在组件中，使用服务将数据从一个组件传递到另一个组件。@SujataChanda，感谢您的回答。我尝试了您的解决方案。（这甚至是问题的第一个答案），但它不起作用。在ngOnChanges方法中，我可以更新src，但它不会反映在模板中。如果您对此有其他解决方案，请告诉我。谢谢you@AshishRanjan，我也用同样的方法，但我做了很多修改，使代码功能化，最后将MainContentComponent注入PlayVideoComponent。但是谢谢你的评论！通过在

video

元素中使用

src

属性解决了这个问题。

..

？@AshishRanjan我做了最少的更改。删除$比

video？要少。src

@trichetriche，谢谢你的回复。但是这不起作用。视频看起来还是坏了d我在控制台中遇到此错误：get 404（未找到）我没有在组件中的任何位置导航。此外，src在play-video.component.ts文件中更新，但没有反映在模板中。@A.Ranjan是的，这不是因为该代码，而是因为您：您的源代码不存在（错误404）。给它一个有效的源，看看它的行为。@a.Ranjan我不关心你的存储库…只要找到正确的源链接，告诉我你是否还有任何错误。