如何將參數傳遞給Ionic2 / Angular2中的提供者構造函數？

Question

我試圖將我的Ionic2.beta11應用程序移植到新的Ionic2.rc0版本。 大多數事情都非常簡單，但我對AoT編譯器有疑問。

我有一個AuthService：

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

我在src/app/app.module.ts文件src/app/app.module.ts它注入我的應用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()手動替換constructor(http: Http)時，一切正常。

我閱讀了所有可以找到的StackOverflow答案，但沒有一個解決方案解決了我的問題。

我是否需要更改AuthService中的構造函數或將其注入我的應用程序的方式？ 謝謝您的幫助。

Answer 1

您必須改變方式，如何定義提供者：

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

最后一塊是工廠功能：

export function getAuthService(http: Http): LoggingService {
  return new AuthService(http);
}

另請參見遷移到Ionic 2 RC 0 - ngc失敗

Answer 2

我遇到了同樣的問題，Markus讓我走上了正軌，但這就是我需要做的事情（參見Angular docs Dependency Injection ）下的“Factory Providers”：

使注入的服務中的構造函數參數可選。 僅此一點是不夠的（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) {}

}

Answer 3

在app模塊中從@angular/http導入HttpModule ，如下所示：

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) {
  }
  ...
}