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

这就是我想要达到的目标。每当用户单击另一个

组件时，我都会尝试更新
组件中的值。看看我的代码

这是我的
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>

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

videotab.model.ts
文件

    <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>

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

这是我希望组件更新
src属性上我的
video标记中的值的地方
****已更新以使用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\u ERR\u SRC\u NOT \u SUPPORTED）由于服务器或网络故障或格式不受支持，无法加载媒体。
当我在新选项卡中加载带有mp4文件的cloudfront链接时，一切都加载正常。感谢所有帮助
您可以通过事件绑定拦截每个选项卡上的单击（…），然后将单击的选项卡保存到组件的属性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>

您可以通过事件绑定拦截每个选项卡上的单击（…），然后将单击的选项卡保存到组件的属性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>

在我的情况下。我使用@input绑定将视频文件从一个组件传输到此组件，其标题、描述与视频选项卡类似，我认为您的组件html视频标记中没有使用videojs。请检查下面的代码

更新：将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>


{{tabs.title}}
{{tabs.description}}


Plunker:
在我的情况下。我正在使用@input绑定将视频文件从一个组件发送到此组件，其标题、描述与您的视频选项卡类似，我认为您的组件html视频标记中没有使用videojs。请检查下面的代码

更新：将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>


{{tabs.title}}
{{tabs.description}}


Plunker:
由于您是Angular 2的新手，请允许我将您重定向到。我认为，一个完整的教程将帮助你在一个论坛上超过几个用户。真棒，谢谢！！自从我看完这本书后，就没看过文档。展望未来@Trichetrich如果你应该的话，这真是一座金矿。实际上，我在浏览器中锁定了教程选项卡，以便快速访问它！由于您是Angular 2的新手，请允许我将您重定向到。我认为，一个完整的教程将帮助你在一个论坛上超过几个用户。真棒，谢谢！！自从我看完这本书后，就没看过文档。展望未来@Trichetrich如果你应该的话，这真是一座金矿。实际上，我在浏览器中锁定了教程选项卡，以便快速访问它！获取以下错误消息
时无法读取未定义的属性“videoSrc”
，这看起来很清楚，但我的OOP水平使我很难纠正这一错误。你能详细说明你的答案吗？我还不熟悉使用elvis算子（？）为防止在单击选项卡之前currentTab仍然未定义的情况下出现绑定错误，请不要忘记标记答案已解决您的问题获取以下错误消息
无法读取未定义的属性“videoSrc”
，这看起来很清楚，但我的OOP水平使其难以更正。你能详细说明你的答案吗？angular 2我还是新手，它使用elvis运算符（？）来防止绑定错误，以防在单击选项卡之前currentTab仍然未定义Don’别忘了标记答案已解决您的问题使用我当前的实现，我可以根据我选择的选项卡动态更改我的
视频
标记中的
src
属性，但是我的video.js播放器不会在我更改src后加载或播放视频。有我应该调用的方法吗？你知道吗？你能用videojs代码更新你的问题吗？您使用什么样的视频路径，如mp4或m3u8？如果有任何错误，请张贴。我认为src没有正确更新。你能在新标签中检查视频路径url吗？是否播放？是的，一切正常。我的cloudfront链接工作正常。在这里，你可以用我当前的实现检查你自己创建的Plunker，我可以根据我选择的选项卡动态更改我的
video
标记中的
src
属性，但是我的video.js播放器在我更改src后不会加载或播放视频。有我应该调用的方法吗？你知道吗？你能用videojs代码更新你的问题吗？您使用什么样的视频路径，如mp4或m3u8？如果有任何错误，请张贴。我认为src没有正确更新。你能在新标签中检查视频路径url吗？是否播放？是的，一切正常。我的cloudfront链接工作正常。您可以在这里查看您的