我正在使用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 回答
安装后:
npm i ngx-youtube-player
在你的VideosPageModule中你应该添加:
检查这个工作stackblitz