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文件***** UPDATED ******

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
    ) {}
}

这是我希望组件更新video tag *** src attribute更新使用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文件的cloudfront链接时，一切都正常加载。感谢所有帮助

Answer 1

您可以通过事件绑定（...）拦截单击每个选项卡，然后将单击的选项卡保存到组件的属性currentTab中，然后您可以使用[prop] =“...”进行属性绑定将当前标签返回到视频标记的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

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

2 个答案: