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

3323 ワード
angglar.js アングラー2
目次
  • 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 CLI基本使用
  • Angular CLI(オプション)
    • をインストール
    npm install -g @angular/cli
  • 新規プロジェクトの作成
    • ng new PROJECT-NAME
  • ローカルサーバ
    • を起動
    cd PROJECT-NAME
ng serve

    依存注入の概要
    依存注入の概念と役割を紹介する前に,まず例を見てみよう.皆さん、目を大きく開けてください.私は「ドアを閉めて車を作る」ことを始めます.
    例の説明
    1台の車の内部構造は複雑で、簡単に考えると、車体、ドア、エンジンの3つの部分しか考えられません.次に、各セクションを定義します.
    1.車体類の定義
    export default class Body { }

    2.ドア類の定義
    export default class Doors { }

    3.車のエンジン類の定義
    export default class Engine {
  start() {
    console.log('?   ~~~');
  }
}

    4.自動車類の定義
    import Engine from './engine';
import Doors from './doors';
import Body from './body';

export default class Car {
    engine: Engine;
    doors: Doors;
    body: Body;

    constructor() {
      this.engine = new Engine();
      this.body = new Body();
      this.doors = new Doors();
    }

    run() {
      this.engine.start();
    }
}

    準備が整いました.すぐに車を作りましょう.
    let car = new Car(); //     
car.run(); //

    車はすでに出発に成功したが、以下の問題がある.
  • 問題1:新車を作成する際、車のエンジンを交換したいと仮定すると、現在の案では実現できません.
  • 問題2:自動車クラスの内部では、構造関数で手動で各部品を作成する必要があります.

    • 最初の問題を解決するために、より柔軟なソリューションを提供するために、定義された自動車クラスを再構築することができます.具体的には、次のようにします.
    export default class Car {
    engine: Engine;
    doors: Doors;
    body: Body;

    constructor(engine, body, doors) {
      this.engine = engine;
      this.body = body;
      this.doors = doors;
    }

    run() {
      this.engine.start();
    }
}

    自動車類を再構築したら、新しい車を再構築します.
    let engine = new NewEngine();
let body = new Body();
let doors = new Doors();
this.car = new Car(engine, body, doors);
this.car.run();

    このとき,上述した第1の問題を解決したが,第2の問題を解決するには,まず依存注入の概念を紹介しなければならない.
    依存注入の概念
    ソフトウェアエンジニアリングでは,依存注入は依存設計モードを解決するために制御反転を実現する.1つの依存関係とは、利用可能なオブジェクト(すなわち、サービスプロバイダ)を指す.依存注入は、使用する依存オブジェクト(すなわちクライアント)に依存を渡すものです.このサービスはクライアントの状態の一部になります.本設計モデルの基本的な要件は、クライアントがサービスを確立または検索することを許可するのではなく、クライアントにサービスを伝達することである.ウィキペディア
    コンセプトを見て気絶したのではないでしょうか.実は、依存注入の3つの役割を覚えています.使用者、サービス(依存オブジェクト)、インジェクタです.次に,Angularにおける依存注入の応用をすぐに見てみる.
    Angular依存注入の応用
    更新された自動車類
    @Injectable()
export default class Car {
  constructor(
    private engine: Engine, 
    private body: Body, 
    private doors: Doors) {}
    
   run() {
     this.engine.start();
   }
};

    具体的な応用
    import { ReflectiveInjector } from '@angular/core';

let injector = ReflectiveInjector.resolveAndCreate([Car, 
  Engine, Doors, Body]);
let car = injector.get(Car);
car.run();

    上の例を見て、私たちが前に述べた2番目の問題は、完璧に解決されました.依存注入の詳細については、Angular 2 DI-IoC&DI-1を参照してください.
    Angular 4依存注入チュートリアルの6 Injectable装飾器
    Angular 4依存注入チュートリアルの6 Injectable装飾器