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的提供程序！在injectionError（core.es5.js：1231）在noProviderError（core.es5.js：1269）在ReflectiveInjector _。 throwOrNull（core.es5.js：2770）在ReflectiveInjector 。 getByKeyDefault（core.es5.js：2809）在ReflectiveInjector 。 getByKey（core.es5.js：2741）在ReflectiveInjector .get（core.es5.js：2610）在AppModuleInjector.NgModuleInjector.get（core.es5.js：3557） at resolveDep（core.es5.js：11017）在createClass（core.es5.js：10881）在createDirectiveInstance（core.es5.js：10701）

Answer 1

您需要将提供程序添加到NgModule，即providers下的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

首先，您需要转换＆＃39; DataListProvider＆＃39;进入注射剂：

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 
  ]
})

希望这可以帮到你！

离子2运行时错误没有Porvider

3 个答案: