web-dev-qa-db-ja.com

Ionic2 / Angular2のプロバイダーコンストラクターに引数を渡すにはどうすればよいですか？

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

ionic serveを実行するとすべて正常に動作しますが、ビルドしようとすると、次のエラーが発生します。

_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のコンストラクターを変更する必要がありますか、それともアプリにコンストラクターを挿入する方法を変更する必要がありますか？ご協力ありがとうございました。

angulartypescriptdependency-injectionionic2
10
Andreas Gassmann

プロバイダーの定義方法、方法を変更する必要があります。

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

最後の部分はファクトリ関数です：

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

参照 Ionic 2 RC 0-ngcが失敗します への移行

11
Markus Wagner

私は同じ問題を抱えていて、Markusは私を正しい軌道に乗せましたが、これが私が始めるために必要なことです（ Angular docs DependencyInjection の下の「FactoryProviders」も参照してください）：

注入されたサービスのコンストラクターパラメーターをオプションにします。これだけでは不十分です（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プロバイダーからのサービス。

コンポーネントでサービスを使用するには、 インジェクター サービスを注入するのではなく：

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

}
1
planetClaire

以下のように、アプリモジュールの@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) {
  }
  ...
}
0
ranakrunal9