我正在尝试在我的ionic3应用程序中包含一个WheelSelector(Ionic Native的Wheel-selector插件),但是当我尝试将WheelSelector导入并添加到我的app.module.ts@NgModule中的提供程序列表中时,我收到错误:"类型'WheelSelectorOriginal'不能分配给类型'提供程序'。
我正在尝试遵循这个简单的教程:https://ionicacademy.com/wheel-picker-ionic/
我已经通过在我的项目文件夹中执行以下操作来安装插件:
ionic cordova plugin add cordova-wheel-selector-plugin
npm install --save @ionic-native/wheel-selector
最终,我根本无法让插件工作。
我尝试从两者导入车轮选择器:
'@ionic-native/wheel-selector'
'@ionic-native/wheel-selector/ngx'
如果我使用 ngx 版本,我不再收到上面的赋值错误,但是我收到一个新的运行时错误,指出 Object(...) 不是一个函数。
app.module.ts:
import { WheelSelector } from '@ionic-native/wheel-selector';
...
@NgModule({
...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
WheelSelector
]
首页:
import { Component } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';
import { WheelSelector } from '@ionic-native/wheel-selector';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
dummyJson = {
days: [
{description: 'Mon'},
{description: 'Tue'},
{description: 'Wed'},
{description: 'Thu'},
{description: 'Fri'},
{description: 'Sat'},
{description: 'Sun'}
],
people: [
{description: 'Joe'},
{description: 'John'},
{description: 'Max'}
]
};
constructor(public navCtrl: NavController,
private toastCtrl: ToastController, private selector: WheelSelector) {}
openPicker(){
this.selector.show({
title: 'select your contact',
positiveButtonText: 'yes',
negativeButtonText: 'no',
items:[
this.dummyJson.days,
this.dummyJson.people
],
defaultItems: [
{index:0, value: this.dummyJson.days[4].description},
{index:1, value: this.dummyJson.people[1].description},
]
}).then(result=>{
let msg = 'woo';
let toast = this.toastCtrl.create({
message: msg,
duration: 4000
});
toast.present();
});
}
}
任何帮助,我将不胜感激!谢谢!
已解决:
有几个问题:
我相信过去的 Ionic 2 现在离子原生插件的导入必须来自 ngx 文件夹。在 app.module.ts 文件和 home.ts 文件中都更改了此设置。这将解决提供程序分配问题。
import { WheelSelector } from '@ionic-native/wheel-selector'/ngx;
接下来,在我的package.json文件中,我将所有@ionic原生依赖项升级为:"5.0.0-beta.15"。所以:
"@ionic-native/core": "5.0.0-beta.15",
"@ionic-native/splash-screen": "5.0.0-beta.15",
"@ionic-native/status-bar": "5.0.0-beta.15",
"@ionic-native/wheel-selector": "5.0.0-beta.15",
然后:
npm install
应用程序现在运行良好,没有错误 - 仍然无法显示滚轮选择器,但我认为这可能是因为我是在浏览器而不是设备上进行测试......