Ionic 2运行时错误无Porvider

Question

我创建了一个名为data-list.ts 的提供程序文件

包含在我的app.moudule.ts 中

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { MyApp } from './app.component';
import { IonicStorageModule } from '@ionic/storage';
import { InfiniteScrollModule } from 'angular2-infinite-scroll';
import { LoginPage } from '../pages/login/login';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AuthServiceProvider } from '../providers/auth-service/auth-service';
import { JobsServiceProvider } from '../providers/jobs-service/jobs-service';
import { DataListProvider } from '../providers/data-list/data-list';

@NgModule({
declarations: [
MyApp,
LoginPage,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
InfiniteScrollModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
LoginPage,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
JobsServiceProvider,
DataListProvider 
]
})
export class AppModule {}

在我想要使用它的文件(home.ts)中，并将其包含在我的构造函数中

import { DataListProvider } from '../../providers/data-list/data-list';
constructor(public navCtrl: NavController,public DataListProvider: DataListProvider) {}

但我一直收到这个错误，我错过了什么：

MyApp_Host.html:1错误错误：没有DataListProvider的提供程序！at injectionError(core.es5.js:1231)在noProviderError(core.es5.js:1269)ReflectiveInjector_throwOrNull(core.es5.js:2770)ReflectiveInjectorgetByKeyDefault(core.es5.js:2809)ReflectiveInjectorgetByKey(core.es5.js:2741)位于ReflectiveInjector.get(core.es5.js:2610)位于AppModuleInjector.NgModuleInector.get(core.es5.js:3557)在resolveDep(core.es5.js:1107)在createClass(core.es5.js:10881)在createDirectiveInstance(core.es5.js:10701)

Answer 1

您需要将提供者添加到NgModule，即提供者下的module.ts，

providers: [
DataListProvider
]

Answer 2

您需要将DataListProvider添加到app.moudule.ts中的提供程序列表中，如下所示：

import { DataListProvider } from '../providers/data-list/data-list';
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
JobsServiceProvider,
DataListProvider 
]

Answer 3

首先，您需要将"DataListProvider"转换为可注入的：

import {Injectable} from '@angular/core';
@Injectable()
export class DataListProvider() {
// Content Service
}

然后将其导入app.module.ts:中的@NgModule提供者列表

import {DataListProvider} from '../providers/data-list/data-list';
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
JobsServiceProvider,
DataListProvider 
]

如果此解决方案不适用于您，您可以尝试将Home组件转换为模块：

import {NgModule, ModuleWithProviders} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from '@angular/router';
import {Home} from './home';
@NgModule({
imports: [CommonModule, RouterModule],
declarations: [Home],
exports: [Home]
})
export class HomeModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: HomeModule
};
}
}

并将该模块导入@NgModule:

import {HomeModule} from './home.module.ts';
@NgModule({
declarations: [
MyApp,
LoginPage,
AboutPage,
ContactPage,
TabsPage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
InfiniteScrollModule,
HomeModule.forRoot()  // -> New Module
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
LoginPage,
AboutPage,
ContactPage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
JobsServiceProvider,
DataListProvider 
]
})

希望这能帮助到你！