在@NgModule中声明为提供者时,WheelSelector ionic 原生插件出错



我正在尝试在我的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

应用程序现在运行良好,没有错误 - 仍然无法显示滚轮选择器,但我认为这可能是因为我是在浏览器而不是设备上进行测试......

最新更新