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

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

#Angular での依存性注入 (DI)

1.概要 #DI

と呼ばれる

##依存性注入 (Dependency Injection) は、オブジェクト指向 プログラミングにおける 設計原則 であり、数を減らすために使用されます。コード間のギャップの 結合度 。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

class MailService {
  constructor(APIKEY) {}
}

class EmailSender {
  mailService: MailService
  constructor() {
    this.mailService = new MailService("APIKEY1234567890")
  }

  sendMail(mail) {
    this.mailService.sendMail(mail)
  }
}

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

EmailSender クラスは、実行時に MailService クラスを使用する必要があります。EmailSender クラスは MailService クラスに依存しており、MailService クラスはEmailSender クラスの依存関係。

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

class EmailSender {
  mailService: MailService
  constructor(mailService: MailService) {
    this.mailService = mailService;
  }
}
const mailService = new MailService("APIKEY1234567890")
const emailSender = new EmailSender(mailService)

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

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

2. DI フレームワークAngular には、依存関係注入プロセスを実装する独自の

DI フレームワーク

がありますhidden、開発者は非常に単純なコードを使用して、複雑な依存関係注入関数を使用できます。 Angular の DI フレームワークには 4 つの中心的な概念があります:

• Dependency

  : コンポーネントが依存するインスタンス オブジェクト、サービス インスタンス オブジェクト

• Token

  : サービス インスタンス オブジェクトの ID を取得します

• Injector

  : インジェクター、責任者 サービス クラスのインスタンス オブジェクトを作成および維持し、 サービス インスタンス オブジェクトをコンポーネントに挿入します (サービス オブジェクトの作成と取得を管理します)。

プロバイダ
• : インジェクタのオブジェクトを設定し、サービス クラスを指定してサービス インスタンス オブジェクトを作成し、インスタンス オブジェクトの識別子を取得します。 (プロバイダー: プロバイダー)

2.1 インジェクター

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

インジェクターの作成

import { ReflectiveInjector } from "@angular/core"
// 服务类
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) // false

• サービス インスタンスの検索は関数
スコープ チェーン
• に似ています。現在のレベルが見つかった場合は、現在のレベルを使用します。現在のレベルが見つからない場合は、親に移動して見つけます。

  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 プロバイダ Provider

インスタンス オブジェクトを作成するサービス クラスを指定して、インジェクターのオブジェクトを構成します。およびサービス インスタンス オブジェクトにアクセスするための識別子。

const injector = ReflectiveInjector.resolveAndCreate([
  { provide: MailService, useClass: MailService }
])

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

const injector = ReflectiveInjector.resolveAndCreate([
  { provide: "mail", useClass: MailService }
])
const mailService = injector.get("mail")

• useValue

const injector = ReflectiveInjector.resolveAndCreate([
  {
    provide: "Config",
    useValue: Object.freeze({
      APIKEY: "API1234567890",
      APISCRET: "500-400-300"
    })
  }
])
const Config = injector.get("Config")

• インスタンス オブジェクトと外部参照の間に疎結合関係を確立します。外部オブジェクトは識別子を通じてインスタンス オブジェクトを取得します。識別子が変更されない限り、内部コードがどのように変更されても、外部には影響しません。世界。

プログラミング関連の知識について詳しくは、

プログラミング ビデオ

をご覧ください。 ！

以上がAngular 学習で依存関係の注入について語るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。