无法绑定到“videoId”，因为它不是“youtube-player”的已知属性

Question

我正在使用 Ionic 3 和 Angular 5。我将 Youtube 视频嵌入到我的应用程序中，为此，我使用了ngx-youtube-player。但它给了我错误：

模板解析错误：无法绑定到“videoId”，因为它不是已知的 “youtube 播放器”的属性。 1. 如果 'youtube-player' 是一个 Angular 组件并且它有 'videoId' 输入，那么验证它是这个模块的一部分。 2. 如果“youtube-player”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中 压制此消息。 3. 允许任何属性将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。 (" ][videoId]="fetch.video_id_" (ready)="savePlayer($event)" (更改)="onStateChange($event)"> [错误->]） 在 JitCompiler._compileComponents (vendor.js:114542) 在 vendor.js:114412 在 Object.then (vendor.js:81363) 在 JitCompiler._compileModuleAndComponents (vendor.js:114411)

我的 app.module.ts 是：

   import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { SuperTabsModule } from 'ionic2-super-tabs';
import { YoutubePlayerModule } from 'ngx-youtube-player';
import { MyApp } from './app.component';
import { TabPage } from '../pages/tab/tab';
import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering';
// import {SingleMediaPlayer} from './single-media-player';  
//-----------My own changes------------
import { ApiProvider } from '../providers/api/api';
// import {SingleMediaPlayer} from './single-media-player';
import { VideosPage } from '../pages/videos/videos';
import { VideosPageModule } from '../pages/videos/videos.module'; 
import { HttpClientModule } from '@angular/common/http';
//.............
@NgModule({
  declarations: [
    MyApp,
    TabPage,
    // SingleMediaPlayer
  ],
  imports: [
    BrowserModule, YoutubePlayerModule,
    IonicModule.forRoot(MyApp),
    SuperTabsModule.forRoot(),
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule,VideosPageModule,HttpClientModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    TabPage,VideosPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
  ]
})
export class AppModule {}

我的 video.component.ts 是：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ModalController } from 'ionic-angular';
import { ApiProvider } from './../../providers/api/api';
import { Observable } from 'rxjs/Observable';
import { Model } from '../Model/Model';

/**
 * Generated class for the VideosPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-videos',
  templateUrl: 'videos.html',
})
export class VideosPage { 
    videos: Model;
    player:any;sanitizer:any;

  constructor(public navCtrl: NavController, public navParams: NavParams,public modalCtrl: ModalController,public apiProvider: ApiProvider) {
  this.apiProvider.getVideos()
      .subscribe(data => {
        this.videos = data;
        console.log(this.videos);
      });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad VideosPage');
  }
  videoplay(){ 
    let modal = this.modalCtrl.create('PlayPage');
    modal.present();
  }
     savePlayer(player) {
    this.player = player;
    console.log('player instance', player) 
  }
  onStateChange(event) {
    console.log('player state', event.data); 
  }

  mySplit = function(string, nb) {
    var array = string.split('|');
    return array[nb];
  }  
}

我的videos.html是：

  <div class="song_wrapper">
      <div class="title">
        <h4>Featured</h4>
        <button ion-button outline round small no-margin="" text-capitalize="" color="lightgrey">View All</button>
      </div>



      <ion-slides slidesPerView="4.5" spaceBetween="10">
        <ion-slide *ngFor="let fetch of videos?.data?.featured">
         <youtube-player
                            [videoId]="fetch.video_id_" (ready)="savePlayer($event)"
                        (change)="onStateChange($event)"></youtube-player>

         <!--  <img src="assets/removable/recently-played/Untitled-1-02.jpg" alt="">
          <div class="play_icon"> -->
            <ion-icon name="videocam"></ion-icon>

          <p> {{fetch.category_name}}</p>
        </ion-slide>

      </ion-slides>
    </div>

Answer 1

安装后：npm i ngx-youtube-player

您应该在 VideosPageModule 中添加：

import { YoutubePlayerModule } from 'ngx-youtube-player';

@NgModule({
  imports:      [ YoutubePlayerModule ]
})

检查这个工作stackblitz