为什么我会收到错误消息，指出某些 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'