目次

Angular 4依存注入チュートリアルの1つ依存注入概要

Angular 4依存注入チュートリアルの2コンポーネントサービス注入

Angular 4依存注入チュートリアルの3 ClassProviderの使用

Angular 4依存注入チュートリアルの4 FactoryProviderの使用

Angular 4依存注入チュートリアルの5 FactoryProvider構成依存オブジェクト

Angular 4依存注入チュートリアルの6 Injectableアクセサリ

Angular 4依存注入チュートリアルの7 ValueProviderの使用

Angular 4依存注入チュートリアルの8 InjectTokenの使用

読書の心得
このチュートリアルの開発環境と開発言語:

Angular 4 +

Angular CLI

TypeScript

基礎知識
Angularコンポーネントの作成方法
Angularでは、次のように簡単なコンポーネントを作成します.

@Component({
  selector: 'app-root',
  template: `
    
{{title}}
  `
})
export class AppComponent {
  title: string = 'App Works';
}

Angularサービスの作成方法
Angularでは、次のように簡単なサービスを作成します.

export class DataService {
  getData() {
    return ['Angular', 'React', 'Vue'];
  }
}

コンポーネントへの注入サービス
基礎知識を説明した後、ヒーローの情報を表示するための新しいコンポーネントHeroComponentを作成します.具体的には、次のようになります.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hero',
  template: `
    

      

        ID: {{hero.id}} - Name: {{hero.name}}
      
    
  `
})
export class HeroComponent implements OnInit {
  heros: Array;

  ngOnInit() {
     this.heros = [
       { id: 11, name: 'Mr. Nice' },
       { id: 12, name: 'Narco' },
       { id: 13, name: 'Bombasto' },
       { id: 14, name: 'Celeritas' },
       { id: 15, name: 'Magneta' }
     ];
  }
}

HeroComponentコンポーネントでは、ngOnInitフックでデータ初期化を行い、ngFor命令を用いてヒーローリストの情報を表示する.HeroComponentコンポーネントの作成が完了しました.このコンポーネントの機能を検証します.まずAppModuleにHeroComponentコンポーネントを導入し、具体的には以下の通りである.

import { HeroComponent } from './hero/hero.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroComponent
  ],
  ...
})
export class AppModule { }

次に、AppComponentコンポーネントを更新します.具体的には、次のとおりです.

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

@Component({
  selector: 'app-root',
  template: `
    
  `
})
export class AppComponent {}

予期せぬことがなければ、http://localhost:4200/ページにアクセスすると、次の情報が表示されます.

ID: 11 - Name: Mr. Nice
ID: 12 - Name: Narco
ID: 13 - Name: Bombasto
ID: 14 - Name: Celeritas
ID: 15 - Name: Magneta

まさかすべてが終わったのか、No!No!この授業のテーマは、コンポーネントにサービスを注入する方法を紹介することです.現在のHeroComponentコンポーネントでは、ヒーローリスト情報は固定されており、実際の開発シーンでは、リモートサーバから対応する情報を取得する必要があります.しかし、私たちはこの問題をしばらく考えないで、別のコンポーネントも同じ英雄リスト情報を利用する必要があると仮定して、私たちはどのようにして、まさか直接「究極の絶技」-Copy && Pasteに行きますか.もちろんこれは「究極の絶技」ですが、勝手に使えませんか(殴り合いを恐れないなら、勝手にしてください).
上記の問題に対して、理想的な方法は、データ共有を実現するためにHeroServiceサービスを作成することである.やると言ったらすぐにHeroServiceサービスを作成します.具体的には以下の通りです.

export class HeroService {
    heros: Array = [
        { id: 11, name: 'Mr. Nice' },
        { id: 12, name: 'Narco' },
        { id: 13, name: 'Bombasto' },
        { id: 14, name: 'Celeritas' },
        { id: 15, name: 'Magneta' }
    ];

    getHeros() {
        return this.heros;
    }
}

HeroServiceサービスでは、herosプロパティとgetHeros()メソッドを定義します.

heros-ヒーローのリスト情報を保存するための

getHeros()-ヒーローのリスト情報を取得するための

HeroServiceサービスを作成した後、コンポーネントでHeroServiceサービスを使用する方法について説明します.
コンポーネントでのHeroServiceの使用
コンポーネントではHeroServiceサービスが使用され、主に3つのステップに分けられます.

HeroServiceサービス

を導入する.

import { HeroService } from '../hero.service';

声明HeroServiceサービス

@Component({
  selector: 'app-hero',
  ...
  providers: [HeroService]
})

注入HeroServiceサービス

export class HeroComponent implements OnInit {
  constructor(private heroService: HeroService) { }
}

完全なコードは次のとおりです.

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-hero',
  template: `
    

      

        ID: {{hero.id}} - Name: {{hero.name}}
      
    
  `,
  providers: [HeroService]
})
export class HeroComponent implements OnInit {

  constructor(private heroService: HeroService) { }

  heros: Array;

  ngOnInit() {
    this.heros = this.heroService.getHeros();
  }
}

providers: [HeroService]の行を見ると、HeroServiceサービスを以下の方法で構成する可能性があるため、一部の読者は困惑すると信じています.

@NgModule({
  declarations: [
    AppComponent,
    HeroComponent
  ],
  ...
  providers: [HeroService],
  bootstrap: [AppComponent]
})
export class AppModule { }

もちろん2つの方法は影響しません.私たちが最終的に実現しなければならない機能ですが、この2つの方法には違いがあるに違いありません.興味のある読者に、考えてみてください.多くの場合、NgModuleのMetadata情報に対応するサービスを構成することが推奨される.
話があるんだ
なぜHeroServiceを構成し、HeroComponentコンポーネントクラスの構造関数でタイプ宣言を行う必要があるのですか?

import { HeroService } from '../hero.service';

export class HeroComponent implements OnInit {
  constructor(private heroService: HeroService) { }
}

実際には、@NgModule({...})または@Component({...}) Metadataでは、Providerを構成する関連情報にすぎません.つまり、Angular DI(依存注入)システムに、構成されたprovider情報に基づいて、対応する依存オブジェクトを作成する方法を教えます.一方,HeroComponent組立体クラスでは,注入を構築することによって,Angular DIシステムに必要な依存オブジェクトタイプを教える.