Angular 2でシングルトンサービスを作成するにはどうすればよいですか？

ブートストラップ時に注入するとすべての子が同じインスタンスを共有するはずであると読みましたが、メインコンポーネントとヘッダーコンポーネント（メインアプリにはヘッダーコンポーネントとルーターアウトレットが含まれています）はそれぞれサービスの個別のインスタンスを取得しています。

私はFacebookのJavaScript APIを呼び出すために使用するFacebookServiceと、FacebookServiceを使用するUserServiceを持っています。これが私のブートストラップです：

bootstrap(MainAppComponent, [ROUTER_PROVIDERS, UserService, FacebookService]);

ログから、ブートストラップ呼び出しが終了したように見えます。その後、各コンストラクター、MainAppComponent、HeaderComponent、およびDefaultComponentのコードが実行される前に、FacebookServiceが作成され、次にUserServiceが作成されます。

ジェイソンは完全に正しいです！これは、依存性注入が機能する方法が原因です。それは階層的なインジェクターに基づいています。

Angular2アプリケーションにはいくつかのインジェクターがあります：

• アプリケーションのブートストラップ時に構成するルート
• コンポーネントごとのインジェクター。別のコンポーネントの内部でコンポーネントを使用する場合。コンポーネントインジェクタは、親コンポーネント1の子です。アプリケーションコンポーネント（アプリケーションをブーストラップするときに指定するコンポーネント）には、ルートインジェクターが親コンポーネントとして含まれています）。

Angular2がコンポーネントコンストラクタに何かを注入しようとすると：

• コンポーネントに関連付けられているインジェクタを調べます。一致するものがある場合、それを使用して対応するインスタンスを取得します。このインスタンスは遅延して作成され、このインジェクターのシングルトンです。
• このレベルにプロバイダーがない場合は、親インジェクター（など）を調べます。

したがって、アプリケーション全体でシングルトンを使用する場合は、ルートインジェクターまたはアプリケーションコンポーネントインジェクターのいずれかのレベルでプロバイダーを定義する必要があります。

しかし、Angular2はインジェクターツリーを下から見ていきます。つまり、最低レベルのプロバイダーが使用され、関連付けられたインスタンスのスコープはこのレベルになります。

詳細については、この質問を参照してください：

• あるサービスをAngle 2（ベータ）で別のサービスに注入する最良の方法は何ですか？

更新（Angular 6 +）

シングルトンサービスを作成するための推奨方法が変更されました。@Injectableサービスのデコレータで「ルート」に提供するように指定することをお勧めします。これは私にとって非常に理にかなっており、モジュールで提供されているすべてのサービスを一覧表示する必要はもうありません。必要なときにサービスをインポートするだけで、適切な場所に登録されます。モジュールを指定して、モジュールがインポートされた場合にのみ提供されるようにすることもできます。

@Injectable({
  providedIn: 'root',
})
export class ApiService {
}

• https://angular.io/guide/singleton-services
• https://angular.io/guide/providers

更新（Angular 2）

NgModuleで今それを行う方法は、サービスクラスを含む「CoreModule」を作成し、モジュールのプロバイダーにサービスをリストすることだと思います。次に、コアモジュールをメインアプリモジュールにインポートします。これにより、コンストラクターでそのクラスを要求するすべての子に1つのインスタンスが提供されます。

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

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

実際、「プロバイダー」にクラスをリストすると、その新しいインスタンスが作成されます。親コンポーネントがすでにリストしている場合、子は必要ありません。子がある場合、新しいインスタンスを取得します。

ティエリーが言ったように、angularには階層的なインジェクターがあることを知っています。

しかし、あなたが本当に親にそれを注入したくないユースケースを見つけた場合のために、ここに別のオプションがあります。

これは、サービスのインスタンスを作成することで実現でき、提供時には常にそれを返します。

import { provide, Injectable } from '@angular/core';
import { Http } from '@angular/core'; //Dummy example of dependencies

@Injectable()
export class YourService {
  private static instance: YourService = null;

  // Return the instance of the service
  public static getInstance(http: Http): YourService {
    if (YourService.instance === null) {
       YourService.instance = new YourService(http);
    }
    return YourService.instance;
  }

  constructor(private http: Http) {}
}

export const YOUR_SERVICE_PROVIDER = [
  provide(YourService, {
    deps: [Http],
    useFactory: (http: Http): YourService => {
      return YourService.getInstance(http);
    }
  })
];

次に、コンポーネントでカスタム提供メソッドを使用します。

@Component({
  providers: [YOUR_SERVICE_PROVIDER]
})

また、階層型インジェクターに依存することなく、シングルトンサービスが必要です。

これがより良い方法だと言っているのではなく、誰かが階層的なインジェクターが不可能な問題を抱えている場合に備えています。

構文が変更されました。このリンクをチェック

依存関係は、インジェクターの範囲内のシングルトンです。以下の例では、HeroesComponentとそのHeroListComponentの子の間で単一のHeroServiceインスタンスが共有されています。

ステップ1. @Injectableデコレーターを使用してシングルトンクラスを作成する

@Injectable()
export class HeroService {
  getHeroes() { return HEROES;  }
}

ステップ2.コンストラクターに注入する

export class HeroListComponent { 
  constructor(heroService: HeroService) {
    this.heroes = heroService.getHeroes();
  }

ステップ3.プロバイダーを登録する

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    routing,
    HttpModule,
    JsonpModule
  ],
  declarations: [
    AppComponent,
    HeroesComponent,
    routedComponents
  ],
  providers: [
    HeroService
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

追加@Injectableサービスにデコレータを、ANDルートモジュール内のプロバイダとしてそれを登録すると、そのシングルトンようになります。

これは私にとってうまく機能しているようです

@Injectable()
export class MyStaticService {
  static instance: MyStaticService;

  constructor() {
    return MyStaticService.instance = MyStaticService.instance || this;
  }
}

Angularバージョン2.3の実際の例を次に示します。このコンストラクター（private _userService：UserService）のように、サービスのコンストラクターをそのまま呼び出すだけです。そして、アプリのシングルトンを作成します。

user.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Subject }    from 'rxjs/Subject';
import { User } from '../object/user';


@Injectable()
export class UserService {
    private userChangedSource;
    public observableEvents;
    loggedUser:User;

    constructor() {
       this.userChangedSource = new Subject<any>();
       this.observableEvents = this.userChangedSource.asObservable();
    }

    userLoggedIn(user:User) {
        this.loggedUser = user;
        this.userChangedSource.next(user);
    }

    ...
}

app.component.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { UserService } from '../service/user.service';
import { User } from '../object/user';

@Component({
    selector: 'myApp',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    loggedUser:User;

    constructor(private _userService:UserService) { 
        this._userService.observableEvents.subscribe(user => {
                this.loggedUser = user;
                console.log("event triggered");
        });
    }
    ...
}

A singleton serviceは、アプリにインスタンスが1つだけ存在するサービスです。

アプリケーションにシングルトンサービスを提供する方法は（2）あります。

1. providedInプロパティを使用する、または

2. AppModuleアプリケーションのモジュールを直接提供する

ProvidedInの使用

Angular 6.0以降、シングルトンサービスを作成するための推奨される方法はprovidedIn、サービスの@Injectable()デコレーターでrootに設定することです。これにより、アプリケーションルートでサービスを提供するようAngularに指示します。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

NgModuleプロバイダー配列

6.0より前のAngularバージョンでビルドされたアプリでは、サービスは次のようにNgModuleプロバイダー配列に登録されます。

@NgModule({
  ...
  providers: [UserService],
  ...
})

これNgModuleがrootのAppModule場合、UserServiceはシングルトンになり、アプリ全体で利用できます。このようにコード化されたように見えるかもしれませんが、Angular 6.0では、サービス自体でデコレータのprovidedInプロパティを使用する@Injectable()ことをお勧めします。

useValueプロバイダーで使用できます

import { MyService } from './my.service';

@NgModule({
...
  providers: [ { provide: MyService, useValue: new MyService() } ],
...
})

アンギュラ@ 6からは、あなたが持っている可能providedInでInjectable。

@Injectable({
  providedIn: 'root'
})
export class UserService {

}

ここのドキュメントを確認してください

Angularでサービスをシングルトンにする方法は2つあります：

1. サービスはアプリケーションルートで提供する必要があることを宣言します。
2. AppModuleまたはAppModuleによってのみインポートされるモジュールにサービスを含めます。

Angular 6.0以降では、シングルトンサービスを作成するための推奨される方法は、サービスでアプリケーションルートに提供する必要があることを指定することです。これは、サービスの@Injectableデコレータで、providedInをrootに設定することで行われます。

app.module.tsでのみ、プロバイダーとしてサービスを宣言してください。

それは私のために仕事をしました。

providers: [Topic1Service,Topic2Service,...,TopicNService],

次に、コンストラクタのプライベートパラメータを使用してインスタンス化するか、

constructor(private topicService: TopicService) { }

または、サービスがhtmlから使用されている場合、-prodオプションは次のように要求します。

Property 'topicService' is private and only accessible within class 'SomeComponent'.

サービスのメンバーを追加し、コンストラクターで受け取ったインスタンスをこのメンバーに入力します。

export class SomeComponent {
  topicService: TopicService;
  constructor(private topicService: TopicService) { 
    this.topicService= topicService;
  }
}

1. アプリケーションレベルでサービスシングルトンを作成する場合は、app.module.tsで定義する必要があります。

   プロバイダー：[MyApplicationService]（子モジュールでも同じを定義して、そのモジュール固有にすることができます）

   • シングルトンの概念を破るコンポーネントのインスタンスを作成するプロバイダーにこのサービスを追加しないでください。コンストラクターを介して注入するだけです。

2. コンポーネントレベルの作成サービスでシングルトンサービスを定義する場合は、そのサービスをapp.module.tsに追加し、以下のスニペットに示すように、特定のコンポーネント内のプロバイダー配列を追加します。

   @Component（{selector： 'app-root'、templateUrl： './test.component.html'、styleUrls：['./test.component.scss']、providers：[TestMyService]}）

3. Angular 6はアプリケーションレベルでサービスを追加する新しい方法を提供します。AppModuleのプロバイダ[]配列にサービスクラスを追加する代わりに、@ Injectable（）で次の構成を設定できます。

   @Injectable（{providedIn： 'root'}）エクスポートクラスMyService {...}

ただし、「新しい構文」には1つの利点があります。Angularがサービスを遅延して（バックグラウンドで）ロードでき、冗長なコードを自動的に削除できます。これにより、パフォーマンスと読み込み速度が向上する可能性がありますが、これは実際には、より大きなサービスとアプリに対してのみ有効です。

上記の優れた回答に加えて、シングルトン内のものがまだシングルトンとして動作しない場合は、他に不足している可能性があります。シングルトンでパブリック関数を呼び出すと、問題が発生し、間違った変数を使用していることがわかりました。問題はthis、シングルトン内のパブリック関数のシングルトンへのバインドが保証されていないことでした。これはアドバイスに従うことによって修正することができ、ここでそのような：

@Injectable({
  providedIn: 'root',
})
export class SubscriptableService {
  public serviceRequested: Subject<ServiceArgs>;
  public onServiceRequested$: Observable<ServiceArgs>;

  constructor() {
    this.serviceRequested = new Subject<ServiceArgs>();
    this.onServiceRequested$ = this.serviceRequested.asObservable();

    // save context so the singleton pattern is respected
    this.requestService = this.requestService.bind(this);
  }

  public requestService(arg: ServiceArgs) {
    this.serviceRequested.next(arg);
  }
}

または、クラスメンバーをのpublic static代わりに宣言するだけでpublic、コンテキストは問題になりませんが、SubscriptableService.onServiceRequested$依存関係注入を使用してを介してアクセスする代わりに、それらにアクセスする必要がありますthis.subscriptableService.onServiceRequested$。

親子サービス

親サービスとその子が異なるインスタンスを使用していて問題が発生していました。1つのインスタンスを強制的に使用するには、アプリモジュールプロバイダーの子を参照して親にエイリアスを設定できます。親は子のプロパティにアクセスできませんが、同じインスタンスが両方のサービスに使用されます。https://angular.io/guide/dependency-injection-providers#aliased-class-providers

app.module.ts

providers: [
  ChildService,
  // Alias ParentService w/ reference to ChildService
  { provide: ParentService, useExisting: ChildService}
]

アプリモジュールのスコープ外のコンポーネントによって使用されるサービス

コンポーネントとサービスで構成されるライブラリを作成すると、2つのインスタンスが作成されるという問題が発生しました。1つはAngularプロジェクトによるもので、もう1つはライブラリ内のコンポーネントによるものです。修正：

my-outside.component.ts

@Component({...})
export class MyOutsideComponent {
  @Input() serviceInstance: MyOutsideService;
  ...
}

my-inside.component.ts

  constructor(public myService: MyOutsideService) { }

my-inside.component.hmtl

<app-my-outside [serviceInstance]="myService"></app-my-outside>