ブートストラップ時に注入すると、すべての子が同じインスタンスを共有するようになるはずだと読みましたが、メイン コンポーネントとヘッダー コンポーネント (メイン アプリにはヘッダー コンポーネントとルーター アウトレットが含まれます) はそれぞれサービスの個別のインスタンスを取得しています。
Facebook の JavaScript API を呼び出すために使用する FacebookService と、FacebookService を使用する UserService があります。これが私のブートストラップです:
bootstrap(MainAppComponent, [ROUTER_PROVIDERS, UserService, FacebookService]);
ログから見ると、ブートストラップ呼び出しが終了し、その後、各コンストラクターのコード (MainAppComponent、HeaderComponent、DefaultComponent) が実行される前に FacebookService、UserService が作成されていることがわかります。
ベストアンサー1
アップデート (Angular 6 +)
作成する推奨方法はシングルトンサービス変更されました。@Injectableサービス上のデコレータで、サービスが「ルート」で提供されるように指定することが推奨されています。これは私にとって非常に理にかなっています。モジュールに提供されているすべてのサービスをリストする必要はまったくありません。必要なときにサービスをインポートするだけで、適切な場所に自動的に登録されます。モジュールを指定するしたがって、モジュールがインポートされた場合にのみ提供されます。
@Injectable({
providedIn: 'root',
})
export class ApiService {
}
アップデート (Angular 2)
NgModule を使用する場合、現時点では、サービス クラスを含む「CoreModule」を作成し、モジュールのプロバイダーにサービスをリストする方法が適切だと思います。次に、メイン アプリ モジュールにコア モジュールをインポートします。これにより、コンストラクターでそのクラスを要求するすべての子に 1 つのインスタンスが提供されます。
コアモジュール.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ApiService } from './api.service';
@NgModule({
imports: [
CommonModule
],
exports: [ // components that we want to make available
],
declarations: [ // components for use in THIS module
],
providers: [ // singleton services
ApiService,
]
})
export class CoreModule { }
アプリモジュール.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
@NgModule({
declarations: [ AppComponent ],
imports: [
CommonModule,
CoreModule // will provide ApiService
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
元の回答
にプロバイダーをリストする場合bootstrap()、コンポーネント デコレータにプロバイダーをリストする必要はありません。
import { ApiService } from '../core/api-service';
@Component({
selector: 'main-app',
templateUrl: '/views/main-app.html',
// DO NOT LIST PROVIDERS HERE IF THEY ARE IN bootstrap()!
// (unless you want a new instance)
//providers: [ApiService]
})
export class MainAppComponent {
constructor(private api: ApiService) {}
}
実際、クラスを 'providers' にリストすると、その新しいインスタンスが作成されます。親コンポーネントのいずれかがすでにそのクラスをリストしている場合は、子はリストする必要はなく、リストしている場合は新しいインスタンスを取得します。