8

Angular 1 では、サービスのファクトリを頻繁に使用して、多くのコンポーネントからアクセス可能な共有状態を保存していました。Angular 2 では @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 経由で可能ですか、それとも静的インスタンス メソッドを手動で作成する必要がありますか?

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

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

一時的なインスタンスを取得するには、コンポーネントがロード/再ロードされるたびにサービスを作成する実際のコンポーネントprovidersでメタ タグとサービス名を宣言できます。

4

4 に答える 4

3

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

https://plnkr.co/edit/FBCa39YC4ZPoy6y8OZQl?p=参照用のプレビュー。

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 { }
于 2016-09-02T04:44:17.233 に答える
1

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

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

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

  • このサービスは、モジュール レベルの providers 配列に含まれています。このモジュールにあるものはすべて、サービスについて認識しています。

  • サービスはモジュール レベルの providers 配列に含まれています - このモジュールにあるものはすべてサービスについて知っていますが、最初のモジュールをインポートする別のモジュールの別のコンポーネント内でこのモジュールのコンポーネントを使用すると、このコンポーネントのサービスのインスタンスが異なる。

于 2017-01-10T10:19:52.190 に答える