Angular の学習で依存関係の注入について語る

著者：Eve Cole 更新時間：2022-06-13 15:49:00

依存性注入とは何ですか?この記事では、Angular の依存関係挿入 (DI) を理解し、AngularDI フレームワークの 2 つの中心的な概念であるインジェクターとプロバイダーについて詳しく紹介します。お役に立てば幸いです。

Angular の依存性注入 (DI)

1. 概要

DIと呼ばれる依存性注入 (DI) は、コード間の結合を減らすために使用される面向对象プログラミングの设计原则です。 [関連チュートリアルの推奨事項:「angular チュートリアル」]

class MailService {
  コンストラクター(APIKEY) {}
}

クラス EmailSender {
  メールサービス: メールサービス
  コンストラクター() {
    this.mailService = new MailService("APIKEY1234567890")
  }

  sendMail(メール) {
    this.mailService.sendMail(メール)
  }
}

const emailSender = new EmailSender()
emailSender.sendMail(mail)

EmailSender クラスは実行時に MailService クラスを使用します。EmailSender クラスは MailService クラスに依存し、MailService クラスは EmailSender クラスの依存関係です。

上記の書き方では結合度が高すぎてコードが堅牢ではありません。 MailService クラスでパラメータの受け渡し方法が変更されると、EmailSender クラスの書き込みメソッドも変更されます。

クラス EmailSender {
  メールサービス: メールサービス
  コンストラクター(mailService: MailService) {
    this.mailService = メールサービス;
  }
}
const mailService = new MailService("APIKEY1234567890")
const emailSender = new EmailSender(mailService)

EmailSender クラスをインスタンス化するときに、コンストラクターのコンストラクターパラメーターを通じてその依存関係をクラスに注入します。この記述方法は依存関係の注入です。

依存関係の注入により、コード間の結合が軽減され、コードの保守性が向上します。 MailService クラスのコード変更は、EmailSender クラスには影響しなくなりました。

2. DI フレームワーク

Angular には、依存関係注入の実装プロセスを隐藏独自のDI 框架があり、開発者は非常に単純なコードを使用するだけで、複雑な依存関係注入関数を使用できます。

Angular の DI フレームワークには 4 つの中心的な概念があります。

Dependency : コンポーネントが依存するインスタンスオブジェクト、サービスインスタンスオブジェクト
Token : サービスインスタンスオブジェクトの ID を取得します
Injector : サービスのインスタンスオブジェクトの创建维护担当するインジェクタークラスを取得し、コンポーネントの Service インスタンスオブジェクトに注入(サービスオブジェクトの作成と取得を管理します)。
Provider : インジェクターのオブジェクトを設定し、サービスクラスを指定してサービスインスタンスオブジェクトを作成し、インスタンスオブジェクトの識別子を取得します。 (プロバイダ: Provider)

2.1 インジェクタ

インジェクタは、サービスクラスインスタンスオブジェクトを作成し、サービスクラスインスタンスオブジェクトを必要なコンポーネントに挿入する責任があります。

「@angular/core」から

インジェクター import { ReflectiveInjector } を作成します

//サービスクラス class MailService {}
// インジェクターを作成し、サービス クラスに渡します const injector = ReflectiveInjector.resolveAndCreate([MailService])

インジェクター内のサービスクラスインスタンスオブジェクトを取得します
```
const mailService = injector.get(MailService)
```
サービスインスタンスオブジェクトはシングルトンモードであり、かつインジェクターは、サービスインスタンスの作成後、キャッシュされます。
```
const mailService1 = injector.get(MailService)
const mailService2 = injector.get(MailService)

console.log(mailService1 === mailService2) // true
```

異なるインジェクターは異なるサービスインスタンスオブジェクトを返します

const injector = ReflectiveInjector.resolveAndCreate([MailService])
const childInjector = injector.resolveAndCreateChild([MailService])

const mailService1 = injector.get(MailService)
const mailService2 = childInjector.get(MailService)

console.log(mailService1 === mailService2) // 偽のサービス インスタンスの検索は、

関数作用域链と同様です。現在のレベルが見つからない場合は、現在のレベルを使用します。検索する親

const injector = ReflectiveInjector.resolveAndCreate([ MailService])
const childInjector = injector.resolveAndCreateChild([])

const mailService1 = injector.get(MailService)
const mailService2 = childInjector.get(MailService)

console.log(mailService1 === mailService2) // true

2.2 プロバイダー

構成インジェクターオブジェクトは、インスタンスオブジェクトを作成するサービスクラスとサービスインスタンスオブジェクトにアクセスするための識別子を指定します。
```
const インジェクター = ReflectiveInjector.resolveAndCreate([
  { 提供: MailService、useClass: MailService }
])
```

依存オブジェクトにアクセスするための識別子は、文字列型にすることもできます。

const injector = ReflectiveInjector.resolveAndCreate([
  { 提供: "メール"、useClass: MailService }
])
const mailService = injector.get("mail")

useValue

const injector = ReflectiveInjector.resolveAndCreate([
  {
    提供:「構成」、
    useValue: Object.freeze({
      APIKEY: "API1234567890",
      APISCRET: "500-400-300"
    })
  }
])
const Config = injector.get("Config") は

、内部コードが変更されていない限り、インスタンスオブジェクトと外部参照の間に疎結合関係を確立します。変更しても外部には影響しません。