Angular 2，当用户单击另一个组件时更新组件

Question

这就是我想要实现的目标。每当用户点击另一个component 时，我都会尝试更新component 中的值。看看我的代码

这是我的app.component.html 文件

    <div class="col-sm" *ngFor="let tabs of videoTabs">

        <!-- this is where i want the user to click on -->
        <div class="tabs hvr-back-pulse">
            <div class="row">
                <div class="text-center col-sm-4">
                    <img src="{{ tabs.image }}" class="rounded-circle img-thumbnail">
                </div>
                <div class="col-sm-8">
                    <small>{{ tabs.title }}</small>
                    <p>{{ tabs.description }}</p>
                </div>
            </div>
        </div>
        <!-- eof click container -->

    </div>

这是我的app.component.ts 文件 *****已更新******

import { Component, EventEmitter } from '@angular/core';
import { VideoTab } from './videotab.model'; //importing our video class so we can use it

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  videoTabs: VideoTab[];

  // when angular creates a new instance of this componenet,
  // it calls the constructor function
  constructor() {
    this.videoTabs = [
      new VideoTab(
        'https://videosrc.video.net/video.png',
        'test',
        'test',
        'test'
      ),
      new VideoTab(
        'https://1111111.cloudfront.net/landingpage.mp4',
        'test',
        'test',
        'test'
      ),
    ]
  }

  setCurrentTab(tab: VideoTab): void {
    this.currentTab = tab;
  }
}

videotab.model.ts文件

/**
 * Provides a Video object 
 */
export class VideoTab {
    constructor(
        public image: string,
        public description: string,
        public title: string,
        public videoSrc: string
    ) {}
}

这是我希望组件在 src attribute 上更新我的 video tag 中的值的地方 ****更新为使用 VIDEO.JS********

<video id="background" class="video-js" loop controls preload="auto" width="100%" height="100%" poster="" data-setup="{}">
    <source [src]="currentTab?.videoSrc" type='video/mp4'>
</video>

现在我的视频标签不在它自己的组件中，它目前在我的标签所在的app.component.html 文件中。感谢所有的帮助。我正在阅读一本关于如何开发 Angular 2 应用程序的书，所以这对我来说仍然是新的。再次感谢大家的帮助！！！

**** 已更新 ****
使用选项卡动态加载 src 属性时，我从 video.js 收到以下错误消息

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. 当我在新选项卡中加载带有 mp4 文件的云端链接时，一切都加载正常。感谢大家的帮助

Answer 1

您可以通过事件绑定（...）拦截每个选项卡上的单击，然后将单击的选项卡保存到组件的属性 currentTab 中，然后您可以使用 [prop]="..." 进行属性绑定以获取将当前标签返回到 video 标签的 src 中：

模板：

<div class="col-sm" *ngFor="let tabs of videoTabs">

    <!-- this is where i want the user to click on -->
    <div class="tabs hvr-back-pulse" (click)="setCurrentTab(tabs)">
        <div class="row">
            <div class="text-center col-sm-4">
                <img src="{{ tabs.image }}" class="rounded-circle img-thumbnail">
            </div>
            <div class="col-sm-8">
                <small>{{ tabs.title }}</small>
                <p>{{ tabs.description }}</p>
            </div>
        </div>
    </div>
    <!-- eof click container -->
</div>
<video>
    <source [src]="currentTab?.videoSrc">
</video>

组件：

export class AppComponent {

    currentTab: VideoTab;

    setCurrentTab(tab: VideoTab): void {
        this.currentTab = tab:
    }
    //.....
}

Answer 2

在我的情况下。我使用@input 绑定将视频文件从一个组件获取到该组件，它的标题和描述就像您的视频标签一样，我认为您没有在组件 html 视频标签中使用 videojs。检查下面的代码

更新：将videojs playlist js文件导入你的index.html并添加以下代码。它将动态改变你videojsplayer的视频src

    import {Component, ElementRef, OnInit, OnDestroy, Input} from '@angular/core';
    import {SaveVideoFile} from '../../models/SaveVideoFile';

    @Component({
        selector: 'video-play',
        templateUrl :'./play-video.html',
        styleUrls: ['']

        }
        export class AppComponent implements AfterViewInit, OnInit, OnDestroy{
            @Input() selectedVideo: SaveVideoFile; // getting video file from another component
            currentTab: VideoTab;
            videoUrl: string;
            videoJSplayer: any;
            constructor(){}

              showVideo(video: SaveVideoFile) {  // getting one selectedVideofile from array of videos when you click on related videos
                console.log("videoComponent showVideo()");
                this.selectedVideo = video; // assining the new video file to existing selectedVideo 
                this.videoUrl = this.selectedVideo.videoPath; // assining the new videoSrcUrl to exsting videoSrcUrl 
                this.videoUrl = 'http://vjs.zencdn.net/v/oceans.mp4';
                this.videoPlayListSource(this.videoUrl);
                }
             videoPlayListSource(videosrc:string){
              this.videoUrl = videosrc;
              const self = this;
              this.videoJSplayer.playlist([{ sources: [{ src: self.videoUrl, 
                          type: 'video/mp4' }]}]);

                 }
               ngOnInit(){
                this.videoUrl = this.selectedVideo.videoPath; // setting the selectedVideo file src here
                this.videoUrl = 'https://yanwsh.github.io/videojs-panorama/assets/shark.mp4'; 
                this.videoJSplayer = videojs(document.getElementById('example_video_11'), {}, function() {
                let player = this;
                this.ready(function() {
                this.bigPlayButton.hide();
                this.play();
               });
             });             
            }
            ngOnDestroy() {
                console.log('Deinit - Destroyed Component')
                this.videoJSplayer.dispose();
            }
        }

html：

<div>
    <video id="example_video_11" class="video-js vjs-default-skin"
                controls preload="auto" width="630" height="320"
                data-setup='{"example_option":true}' [src]=videoUrl>
                <source [src]=videoUrl type="video/mp4" />
    </video>
    </div>
    <div class="col-sm" *ngFor="let tabs of videoTabs">
    <!-- this is where i want the user to click on -->
    <div class="tabs hvr-back-pulse" (click)="showVideo(tabs)">
        <div class="row">
            <div class="text-center col-sm-4">
                <img src="{{ tabs.image }}" class="rounded-circle img-thumbnail">
            </div>
            <div class="col-sm-8">
                <small>{{ tabs.title }}</small>
                <p>{{ tabs.description }}</p>
            </div>
        </div>
    </div>
    <!-- eof click container -->
</div>

Plunker：Video Js Plunker