首页 文章

't bind to ' videoId ' since it isn' t 'youtube-player'的已知属性

提问于
浏览
1

我正在使用Ionic 3和Angular 5.我在我的应用程序中嵌入Youtube视频并且这样做,我正在使用 ngx-youtube-player . 但它给了我错误:

模板解析错误:无法绑定到'videoId',因为它不是'youtube-player'的已知属性 . 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)“> [ERROR - >])在JitCompiler._compileComponents(vendor.js: 114542)at vendor.js:114412 at Object.then(vendor.js:81363)at 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>

1 回答

  • 3

    安装后: npm i ngx-youtube-player

    在你的VideosPageModule中你应该添加:

    import { YoutubePlayerModule } from 'ngx-youtube-player';
    
    @NgModule({
      imports:      [ YoutubePlayerModule ]
    })
    

    检查这个工作stackblitz

相关问题