Angular 2 のコンポーネントの外部にサービスを挿入するにはどうすればよいですか?

Angular 2 での依存関係の挿入: コンポーネントの外部にサービスを挿入する

Angular 2 では、@Component デコレーターを使用してコンポーネントにサービスを簡単に挿入できます。 。ただし、コンポーネントの外部にサービスを挿入する必要があるシナリオもあります。この記事では、依存関係注入 (DI) を使用してこれを実現する方法について説明します。

Injectable Services

サービスの DI を有効にするには、サービスを @Injectable デコレータで修飾する必要があります。 。このデコレータはクラスを注入可能としてマークし、そのパラメータを注入できるようにします。 「Injectable」という名前は、クラスを注入可能にするのではなく、パラメータを注入できるという意味でクラスを注入可能にするため、若干誤解を招きやすいことに注意してください。

依存性注入メカニズム

Angular 2 はインジェクターの階層システムを使用しており、各レベルは特定のコンポーネントまたはコンポーネントのセットに対応しています。コンポーネント。 DI システムは依存関係に遭遇すると、まず現在のインジェクターを調べます。依存関係が見つからない場合は、依存関係のプロバイダーが見つかるまでインジェクター階層を上に移動します。

インジェクター間でのサービスの注入

サービスを別のサービスに注入するにはサービスを作成するには、依存サービスのコンストラクターで依存関係を定義し、依存サービスに @Injectable デコレーターを追加するだけです。 service.

例:

@Injectable()
export class MyFirstSvc {
  // ...
}

@Injectable()
export class MySecondSvc {
  constructor(private myFirstSvc: MyFirstSvc) {
    // ...
  }
}

この例では、MySecondSvc は MyFirstSvc に依存しており、MyFirstSvc が利用可能な任意のインジェクターに注入できます。

定義プロバイダー

プロバイダーを指定するにはサービスの場合は、@Component または NgModule デコレーターのプロバイダー配列を使用します。たとえば、MyFirstSvc をアプリケーション インジェクターのプロバイダーとして定義したい場合は、次のように定義できます。

@Component({
  // ...
  providers: [MyFirstSvc]
})
export class AppComponent {
  // ...
}

結論

階層構造を理解することで、インジェクターと @Injectable デコレーターの性質を利用して、Angular 2 のコンポーネントの外部にサービスを効果的に注入できます。これにより、モジュール式の作成が可能になります。簡単に注入してアプリケーション全体で共有できる再利用可能なサービス。

以上がAngular 2 のコンポーネントの外部にサービスを挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。