typescript - 为什么我会收到一些 Ionic 组件引用一个值但被用作类型的错误？

Question

在几个组件中运行我的 Ionic 应用程序时出现运行时错误，这些组件引用了一个值，但正被用作一个类型。

我试过:
* 重新运行 $ sudo npm i
* 检查旧版本的工作应用程序以查看这些组件是否在 app.component.ts 中

代码

export class MyApp {
  @ViewChild(Nav) nav: Nav;

  // make JobListingsPage the root (or first) page
  rootPage = JobListingsPage;
  pages: Array<{title: string, component: any}>;

  constructor(
    public platform: Platform,
    public menu: MenuController,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen
  ) {

出现以下错误:

Typescript Error
'StatusBar' refers to a value, but is being used as a type here.
src/app/app.component.ts
public menu: MenuController,
public statusBar: StatusBar,
public splashScreen: SplashScreen  

Typescript Error
'SplashScreen' refers to a value, but is being used as a type here.
src/app/app.component.ts
  public statusBar: StatusBar,
  public splashScreen: SplashScreen
) {  

Typescript Error
Type 'StatusBarOriginal' is not assignable to type 'Provider'. Type 'StatusBarOriginal' is missing the following properties from type 'ClassProvider': provide, useClass
src/app/app.module.ts
providers: [
  StatusBar,
  SplashScreen,  

Typescript Error
Type 'SplashScreenOriginal' is not assignable to type 'Provider'. Type 'SplashScreenOriginal' is missing the following properties from type 'ClassProvider': provide, useClass
src/app/app.module.ts
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}

Answer 1

首先你必须像这样安装你的组件:

ionic cordova plugin add cordova-plugin-statusbar
npm install @ionic-native/status-bar

完成后，您必须将它们导入到您的 app.component.ts 中，只需在文件顶部添加以下内容:

import { StatusBar } from '@ionic-native/status-bar/ngx';

从 Ionic v4 开始，您必须在导入组件时添加/ngx，在以前的版本中，您只能使用“@ionic-native/status-bar”