web-dev-qa-db-ja.com

Angular 2はサービスのすべてのパラメーターを解決できません

LoginServiceとUserServiceの2つのサービスがあります。 UserServiceをLoginServiceに挿入しようとしていますが、アプリは実行されません。

コンソールにエラーがあります：

エラー：UserServiceのすべてのパラメーターを解決できません：（[オブジェクトオブジェクト] 、?）。 SyntaxError.ZoneAwareError（ http：// localhost：4200/polyfills.bundle.js：7156： ）at SyntaxError.BaseError [コンストラクターとして]

これは私のLoginServiceです：

import {UserService} from '../services/user.service';
@Injectable()
export class LoginService {

  constructor(public _http: Http,public us:UserService) {
  }

およびUserService：

 @Injectable()
    export class UserService {
    constructor(private _http: Http , public _ls: LoginService) {

    }

角度モジュール：

import {LoginService} from './services/login.service';
import {UserService} from './services/user.service';

@NgModule({
  declarations: [
    AppComponent,


  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

  ],
  exports: [BrowserModule, SlimLoadingBarModule],
  providers: [UserService, LoginService, appRoutingProviders],
  bootstrap: [AppComponent]
})
export class AppModule { }
angularserviceinject
12
Mohammed Yassine CHABLI

循環参照があります。

UserServiceにはLoginServiceが必要で、LoginServiceにはUserServiceが必要です。

依存関係の1つを削除します。例えば。 LoginServiceへの参照を必要としないようにUserServiceをリファクタリングします

29
Steve Land

他の投稿者が循環依存関係に言及したように... forwardRef()を使用してこの問題を解決することを検討できます。

簡単に言えば、実際のサービスの代わりに前方参照を注入できます。そのため、サービスインジェクションは延期されます。したがって、循環依存関係は解決されます。

コードサンプルは次のとおりです。

import {Component, Inject, forwardRef} from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>Favourite framework: {{ name }}</h1>'
})
class AppComponent {
  name: string;

  constructor(@Inject(forwardRef(() => NameService)) nameService) {
    this.name = nameService.getName();
  }
}

class NameService {
  getName () {
    return "Angular";
  }
}

詳細については、 このページ を確認してください。

3
Scott McMaster