如何为角度课程设置播放器？

Posted 2023-02-19

【中文标题】如何为角度课程设置播放器？

【英文标题】：How to set player for course lesson in angular?

【发布时间】：2021-11-07 03:22:41

【问题描述】：

我有课程详细信息组件。在这个组件中，我有 2 个子组件，分别用于播放器和课程。现在，当我单击其中一课时，它需要在播放器中加载合适的视频。任何人都可以帮助我一些想法我该怎么做？我们如何在 Angular 中单击一个组件将命令发送到另一个组件？

这是父组件

<div class='course-details'>
  <div>
     <app-course-player [course]='course'></app-course-player>
  </div>
 <div>
    <app-lesson-card class='w-full' [course]='course'></app-lesson-card>
</div>
</div>

播放器组件

<div *ngFor='let courseLesson of course.lessons'>
<vg-player class='w-full  video-size'>
    <vg-overlay-play vgFor='dreamclass-video'></vg-overlay-play>
    <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-playback-button></vg-playback-button>
        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
        </vg-scrub-bar>
        <vg-time-display vgProperty='left' vgFormat='mm:ss'></vg-time-display>
        <vg-mute></vg-mute>
        <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <video #myMedia
           [vgMedia]='myMedia'
           [poster]='"img-proxy/plain/" + courseLesson.coverUrl'
           id='dreamclass-video'
           [src]='courseLesson.videoUrl'>
    </video>
</vg-player>
</div>

get data from here
 @Input() course: ICourse;

课程组件

   <div class='course-section w-full lg:w-auto border border-white-gray mt-4 lg:mt-0'>
      <div class='flex items-center justify-between'>
           <p class='text-primary   text-2xl price-box font-medium'>Free</p>
      </div>
        <div class='theme-section border-t border-b border-white-gray'>
                <div class='flex items-center justify-between top-margin' *ngFor='let lessonData of course.lessons'>
                    <div class='flex items-center'>
                        <img src='assets/images/sliders/lock.svg' class='mr-right' alt=''>
                        <p class='text-sm font-normal text-darkgray course-box-title'>lessonData.title</p>
                    </div>
                    <div><p
                        class='text-sm font-normal text-regulargray'>lessonData.duration * 1000 | date: 'mm:ss'</p>
                    </div>
                </div>

            </div>
            <div>
                <button *ngIf='!course?.enrolled' mat-raised-button class='enrol-butn' color='primary'
                        (click)='enrollCourse()'> Enroll
                </button>
                <button *ngIf='course?.enrolled' mat-raised-button class='enrol-butn text-white' color='accent'
                        (click)='enrollCourse()'> Enrolled
                </button>
            </div>
        </div>

【问题讨论】：

为了避免对您的问题投反对票，我将更改标题以更具体地针对 Angular 框架。例如：“当另一个组件发生变化时，如何改变一个组件的状态？”

【参考方案1】：

另一种方法是使用服务。

创建服务：

ng g s MyServiceName --skip-Tests

创建后，检查是否已被装饰为providedIn root：

@Injectable(
  providedIn: 'root',
)
export class MyServiceNameService 
....

在您的服务中，声明您希望组件共有的所有内容。 例如：

private _courseSelected: ICourse

在组件的构造函数中注入服务（在课程播放器和课程卡片中）：

...
import  MyServiceNameService  from '../../services/my-service-name.service';
...
constructor(
   private myServiceNameService : MyServiceNameService ) 
  
...

直接使用来自组件的服务中的变量，或者更好的是，在服务中制作方法来修改变量值。

例如：

服务中：

...
export class MyServiceNameService 
public get courseSelected() 
   return this._courseSelected;

constructor()
public someFunctionThaCausesTheVideoSelectionChanges(newVideoUrl: string)
this._courseSelected = newVideoUrl;

...

在组件中：

const myCourseSelectede = this.myServiceNameService.courseSelected;

....
setNewCourse ( newCourse: string) 
   this.myServiceNameService.someFunctionThaCausesTheVideoSelectionChanges(newCourse);

【参考方案2】：

您可以使用课程卡片组件中的输出事件和父组件中的模板 ID 来解决此问题。

类似：

<div class='course-details'>
 <div>
     <app-course-player #player [course]='course'></app-course-player>
 </div>
 <div>
    <app-lesson-card class='w-full' (videoSelect)="player.play($event)" [course]='course'></app-lesson-card>
 </div>
</div>

在课程卡片组件中声明输出事件：

export class LessonCardComponent 
  @Output()videoSelect = new EventEmitter<string>('');
  ...
  someFunctionThaCausesTheVideoSelectionChanges()
     videoSelect.emit('new video url');
  

在 course-player 组件中，声明播放函数

export class CoursePlayerComponent
   ...
   play(videoUrl: string)
      ...