Question

我的代码有问题，我正在逐步学习有关Angular的书，该书可让您构建一些应用程序。好吧，我在编写与代码书相同的内容时非常小心但这不起作用。

这是我的问题。我想在整个库中插入一个对话框模式，可以通过它播放视频并观看它。它的工作方式应该是通过链接到主要组件（videoplayer.ts）的组件，该组件有一些行，视频ID在其中获取并由其他组件使用，以呈现模态视图并清理链接。

这是代码

import { Component, OnInit ,Input, ViewEncapsulation } from 
'@angular/core';

 import { Modal} from 'ngx-modialog/plugins/bootstrap';
 import {VideoDialogComponent, VideoDialogContext } from './video- 
   dialog/video-dialog.component';
  import { overlayConfigFactory} from 'ngx-modialog';

 @Component({
    selector: 'abe-video-player',
    templateUrl: './video-player.component.html',
    styles:[]
    })
  export class VideoPlayerComponent implements OnInit {
   @Input() videos: Array<string>;
     constructor(private modal: Modal) { }

   ngOnInit() {
         }

      playVideo(videoId: string) {
         this.modal.open(VideoDialogComponent,
         overlayConfigFactory(new VideoDialogContext(videoId)));
      }

   }

这是一个图书馆，所以我实际上不知道从何处挑选信息以使其正常运行。我是通过Angualar CLI为5.0版本安装的，它可以正常工作，至少没有错误...

这是模态组件的代码。

import { Component, OnInit } from '@angular/core';
import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
import { DialogRef, ModalComponent, CloseGuard } from 'ngx-modialog';
import { BSModalContext } from 'ngx-modialog/plugins/bootstrap';

export class VideoDialogContext extends BSModalContext {
 constructor(public videoId: string) {
   super();
    this.size = 'lg';
  }
 }

  @Component({
    selector: 'abe-video-dialog',
    templateUrl: './video-dialog.component.html',
    styles:[]
      })
   export class VideoDialogComponent implements OnInit, 
      ModalComponent<VideoDialogContext> {
       videoId: SafeResourceUrl;
      private youtubeUrlPrefix = '//www.youtube.com/embed/';
       constructor(public dialog: DialogRef<VideoDialogContext>, private 
      sanitizer: DomSanitizer) { }

      ngOnInit() {
        this.videoId = 
        this.sanitizer.bypassSecurityTrustResourceUrl(this.youtubeUrlPrefix 
         + this.dialog.context.videoId);
         }

       ok() {
           this.dialog.close();
        }
    }

两个组件的HTML是src属性与函数playVideo（）和ok（）的简单绑定，该函数应播放视频，将videoId插入消毒方法中，并将图像作为缩略图放在视频之前

欢迎任何答案和建议。

谢谢！

Answer 1

我遵循相同的课程，并且遇到了相同的问题。问题似乎是ngx-modialog版本。

在书中，他们指定您应该安装版本5.0.0。尝试使用该缩略图时，单击缩略图没有任何反应。

我未指定版本就通过npm重新安装了ngx-modialog，它安装了版本5.0.1。之后，当我单击它们的缩略图时，视频加载就没有任何问题。

Angular 6上的ngx-modialog库无法播放视频

1 个答案: