Angular でのコンポーネント通信と依存関係の注入について理解します。

Angularコンポーネント間で通信するにはどうすればよいですか?依存性注入とは何ですか?以下の記事ではコンポーネントの通信方法の概要と依存性注入について紹介していますので、ご参考になれば幸いです。

#1. コンポーネントの通信

##1.1 コンポーネント内部へのデータの受け渡し

<app-favorite [isFavorite]="true"></app-favorite>

// favorite.component.ts
import { Input } from '@angular/core';

export class FavoriteComponent {
    @Input() isFavorite: boolean = false;
}

注: 動的値のバインドを示すには、属性の外側に

[]

を追加します。コンポーネントで受け取った後は、ブール型になります。# は追加しないでください。 ##[] は、コンポーネントで受信された後の文字列型である通常の値をバインドすることを示します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

1.2 コンポーネントは外部にデータを送信します

要件 : 子コンポーネントのボタンをクリックして、親コンポーネントにデータを渡します

<!-- 子组件模板 -->
<button (click)="onClick()">click</button>

// 子组件类
import { EventEmitter, Output } from "@angular/core"

export class FavoriteComponent {
  @Output() change = new EventEmitter()
  onClick() {
    this.change.emit({ name: "张三" })
  }
}

<!-- 父组件模板 -->
<app-favorite (change)="onChange($event)"></app-favorite>

// 父组件类
export class AppComponent {
  onChange(event: { name: string }) {
    console.log(event)
  }
}

2. 依存関係の挿入

---

2.1 概要

依存性注入 (Dependency Injection

) は、

DI と呼ばれ、オブジェクト指向プログラミングにおける設計原則であり、コード間の結合度

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

クラスのインスタンス化時に EmailSender クラスの書き込みメソッドも変更されます。依存関係を constructor コンストラクター パラメーターの形式でクラスの内部に注入する場合、この記述方法は依存関係の注入です。

依存関係の挿入により、コード間の結合が軽減され、コードの保守性が向上します。 MailService クラス内のコードを変更しても、EmailSender クラス

2.2

DI には影響しなくなりました。

フレームワーク Angular には独自の DI フレームワークがあり、依存関係注入の実装プロセスを非表示にします。開発者向けには、複雑な依存関係のみが提供されます。インジェクション機能は非常に単純なコードで使用できます。

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

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

• #Token: サービス インスタンス オブジェクトの識別子を取得します

• #Injector

  : インジェクター。サービス クラスのインスタンス オブジェクトの作成と維持、およびサービス インスタンス オブジェクトのコンポーネントへの注入を担当します。

• プロバイダ

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

• 2.2.1 インジェクター

  インジェクター

インジェクターは、サービス クラス インスタンス オブジェクトの作成とサービス クラス インスタンスの変換を担当します。オブジェクトを必要なコンポーネントに挿入するには

インジェクターを作成します

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

インジェクターでサービス クラス インスタンス オブジェクトを取得します

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

• 2.2.2 Provider
Provider

のオブジェクトを設定します。インジェクター、サービス クラスと作成インスタンス オブジェクトを指定します。 アクセス サービス インスタンス オブジェクトの識別子

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

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

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

アクセス依存オブジェクトの識別子は文字列型

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

##にすることもできます。

• #useValue

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

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

  プログラミング ビデオをご覧ください。 ！

以上がAngular でのコンポーネント通信と依存関係の注入について理解します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。