如何将参数传递给Ionic2 / Angular2中的提供者构造函数?

时间:2016-10-03 10:50:33

标签: angular typescript dependency-injection ionic2

我正在尝试将Ionic2.beta11应用程序移植到新的Ionic2.rc0版本中。大多数事情都非常简单,但我对AoT编译器有疑问。

我有一个AuthService:

@Injectable()
export class AuthService {
  constructor(@Inject(Http) http: Http) {
    this.http = http;
  }
  ...
}

我将其注入src/app/app.module.ts文件中的应用程序:

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ],
  providers: [
    AuthService
  ]
})

运行离子服务时一切正常,但是当我尝试构建它时,我收到以下错误:

ngc error: Error: Error at .../.tmp/app/app.module.ngfactory.ts:397:78: Supplied parameters do not match any signature of call target.

第396至399行:

get _AuthService_74():import44.AuthService {
  if ((this.__AuthService_74 == (null as any))) { (this.__AuthService_74 = new import44.AuthService()); }
  return this.__AuthService_74;
}

问题是new import44.AuthService()需要一个http。

类型的参数

有趣的是,当我在定义文件中用constructor(http: Http)手动替换constructor()时,一切正常。

我阅读了所有可以找到的StackOverflow答案,但没有一个解决方案解决了我的问题。

我是否需要更改AuthService中的构造函数或将其注入我的应用程序的方式?谢谢你的帮助。

3 个答案:

答案 0 :(得分:9)

您必须改变方式,如何定义提供者:

  [ErrorException]
  SoapVar::SoapVar(): Invalid type ID

最后一块是工厂功能:

@NgModule({
  ...
  providers: [
    Http,
    {
      provide: AuthService,
      useFactory: getAuthService,
      deps: [Http]
    }
  ]
})

另见Migrating to Ionic 2 RC 0 - ngc fails

答案 1 :(得分:1)

我有同样的问题&马库斯让我走上正轨,但这就是我需要做的事情(参见"工厂提供商" Angular docs Dependency Injection下):

使注入的服务中的构造函数参数可选。仅此一点是不够的(http在运行时未定义)

constructor(public http?: Http){}

创建服务提供者类SomeServiceProvider.ts:

import { Http } from '@angular/http';
import { SomeService } from 'some-service';

export function someServiceFactory(http: Http){
  return new SomeService(http);
}

export let SomeServiceProvider =
  { provide: SomeService,
    useFactory: someServiceFactory,
    deps: [ Http ]
  };

在根app.component.ts中,添加服务提供商:

@Component({
  ...
  providers: [ SomeServiceProvider ]
})

从app.module.ts中的@NgModule提供程序中删除服务。

要在组件中使用该服务,请从 Injector 获取该服务,而不是注入该服务:

import { Component, Injector } from '@angular/core';
import { SomeService } from 'some-service';

@Component({
  ...
})

export class MyComponent{
  someService: SomeService = this.injector.get(SomeService);

  constructor(private injector: Injector) {}

}

答案 2 :(得分:0)

从您应用模块中的HttpModule导入@angular/http,如下所示:

import { HttpModule } from '@angular/http';
@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ],
  providers: [
    AuthService
  ]
})

如下所示更改您的服务并检查一次:

import { Http } from '@angular/http';
@Injectable()
export class AuthService {
  constructor(private http: Http) {
  }
  ...
}