web-dev-qa-db-ja.com

Angular 2-シングルトンサービス？

Angular 1私は頻繁にfactoriesを頻繁に使用して、多くのコンポーネントがアクセスできる共有状態を保存します。これは、Angular 2 all @Injectable（）として挿入されるサービスは毎回作成されるため、共有状態は失われます。

ルートモジュールのprovidersメタキーにサービスを「登録」しましたが、それでも一時的なインスタンスが取得されます。

私が持っているもの：

Injectable()
export class ArtistService {
   constructor(private http:Http) {
     // firing on each injection
     console.log("ArtistService ctor");
   }

}

それをコンポーネントで呼び出すには：

@Component({
    selector: 'artist-display',
    templateUrl: './artistDisplay.html',
})
export class ArtistDisplay  {
    constructor(private artistService: ArtistService) {
           // instance is fine but transient
    }
}

そしてモジュールの定義：

@NgModule({
  declarations: [...],
  imports: [BrowserModule, FormsModule, HttpModule,
    RouterModule.forRoot(rootRouterConfig)],
  providers   : [
      ArtistService,

      // make sure you use this for Hash Urls rather than HTML 5 routing
      { provide: LocationStrategy, useClass: HashLocationStrategy },
  ],
  bootstrap: [AppComponent]
})

ArtistServiceを「登録」して静的インスタンスとしてロードされたままにする他の方法があると思いますか？それはDIを介して可能ですか、または静的インスタンスメソッドを手動で作成する必要がありますか？

更新：
上記のコード機能しますであることがわかります。データが正しくキャッシュされない原因となった論理エラーとともに、間違った場所を探していました。

上記のコードは機能し、トップレベルのAppModuleのprovidersセクションでサービスを割り当てることは、AppComponentの期間中、親参照をロードしたままにするための鍵です。 Singletonインスタンスを提供するアプリの存続期間中、ロードされたままになります。

transientインスタンスを取得するには、providersメタタグとサービス名実際のコンポーネントを宣言して、コンポーネントが読み込まれるたびにサービスを作成します。/re-loaded。

angularangular2-di
8
Rick Strahl

あなたが示したことは正しい方法です。コンポーネント間で共有される単一のインスタンスを作成します。

https://plnkr.co/edit/FBCa39YC4ZPoy6y8OZQl?p=preview 参照用。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import {service} from './service';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent],
  providers:[service],

  bootstrap:    [ AppComponent ]
})
export class AppModule { }
3
micronyks

Angular2のプロバイダーとして使用するオブジェクトも作成したいので、@ injectorを作成しました。しかし、各@componentにプロバイダーを設定してインポートすると、各コンポーネントはインジェクターの異なるオブジェクトを使用します。シングルトンプロバイダーを作成するために、このプロバイダーを親コンポーネントで宣言し、それぞれにインポートしましたが、正常に機能します。 https://angular.io/guide/dependency-injection

3
mukund patel

シングルトンサービスはapp.module.ts "providers"（array）にのみ保持されます。

また、他のコンポーネントまたはサービスプロバイダー（アレイ）に配置しないでください。

これが正しく行われた場合、angular 2-2.4.0-シングルトンは完全に機能します

2
Abdeali Chandanwala

私の経験と基本的にはドキュメントに従ってサービスがどのように機能するかを説明してみましょう。

3つの主なシナリオがあります。

  • サービスは、コンポーネントレベルのプロバイダー配列に含まれています。サービスは、親とすべての子に挿入できます。

  • サービスはモジュールレベルのプロバイダー配列に含まれています。このモジュールに含まれるすべてのものがサービスについて認識しています。

  • サービスはモジュールレベルのプロバイダー配列に含まれています-このモジュール内のすべてのものがサービスについて認識していますが、最初のモジュールをインポートする別のモジュールの別のコンポーネント内でこのモジュールのコンポーネントを使用する場合、このコンポーネントのサービスのインスタンスは異なる。

1
Tek