WheelSelector 离子原生插件在@NgModule 中声明为提供者时出错答案

【问题标题】：WheelSelector ionic-native plugin errors when declaring as provider in @NgModuleWheelSelector 离子原生插件在@NgModule 中声明为提供者时出错
【发布时间】：2019-06-20 23:50:44
【问题描述】：

我试图在我的 ionic3 应用程序中包含一个 WheelSelector（Ionic Native 的轮子选择器插件），但是当我尝试将 WheelSelector 导入并添加到我的 app.module.ts @NgModule 中的提供者列表中时，我收到错误：“类型 'WheelSelectorOriginal' 不可分配给类型 'Provider'。”

我正在尝试遵循这个简单的教程： https://ionicacademy.com/wheel-picker-ionic/

我已通过在我的项目文件夹中执行以下操作来安装插件：

ionic cordova plugin add cordova-wheel-selector-plugin
npm install --save @ionic-native/wheel-selector

最终，我根本无法让插件工作。

我已尝试从两者中导入 WheelSelector：

 '@ionic-native/wheel-selector' 
 '@ionic-native/wheel-selector/ngx'

如果我使用 ngx 版本，我不再收到上面的赋值错误，但是我收到一个新的运行时错误，指出 Object(...) is not a function。

app.module.ts:

import { WheelSelector } from '@ionic-native/wheel-selector';
...
@NgModule({
...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
WheelSelector
]

home.ts:

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();

    });
  } 
 }

如果我出错了，我们将不胜感激！谢谢！

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

已解决：

有几个问题：

我相信在 Ionic 2 之后，现在对 ionic-native 插件的导入必须来自 ngx 文件夹。在 app.module.ts 文件和 home.ts 文件中都进行了更改。这会处理提供者分配问题。

import { WheelSelector } from '@ionic-native/wheel-selector'/ngx;

接下来，在我的 package.json 文件中，我将所有 @ionic-native 依赖项升级为：“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

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

【讨论】：