Angular での依存関係の挿入を理解するためのステップバイステップ ガイド

この記事では、依存性注入について理解し、依存性注入によって解決される問題とそのネイティブの記述方法を紹介し、Angular の依存性注入フレームワークについて説明します。 ！

最近、Angular プロジェクトでキーワードの依存性注入をよく目にしますが、どのように実装されているのかがまだわかりません。使い方については、詳しい原理が説明されていないので、ネイティブの書き方から、依存関係注入でどのような問題を解決するのか、jsでどのように表現すればよいのかを解説していきます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

依存性注入とは

DI と呼ばれる依存性注入は、オブジェクト指向プログラミングにおける設計原則です。コード間の結合を軽減します。

最初にコードを見てみましょう

class Video{
    constructor(url){}
}

class Note{
    video: Video
    constructor(){
        this.video = new Video("https://aaaaa.mp4")
    }
    
    getScreenshot(){
        this.video.getScreenshot()
    }
}

const note = new Note()
note.getScreenshot()

スクリーンショットを取得するメソッド getScreenshot を持つビデオ クラスを使用するとします。ビデオ クラスをインスタンス化するときは、ビデオ URL を渡す必要があります。このようなパラメータで。ここで、note クラスがあり、video クラスの下に Screenshot メソッドを呼び出す必要があるため、note クラスは video クラスに依存していると言えます。したがって、note クラス内で video クラスをインスタンス化して、note クラスで video クラスのインスタンス オブジェクトを取得し、その中でスクリーンショット メソッドを呼び出すことができるようにする必要があります。

上記のコードの結合度が高すぎるため、推奨されません。たとえば、ビデオのビデオ アドレスが変更された場合、受信ビデオ URL を Note で変更する必要があります。これは、クラスはビデオクラスに依存しているため、変更するとすべてそれに合わせて変更する必要があり、非常に不便です。

次に、依存性注入を使用して上記の問題を解決します:

class Note{
    video: Video
    constructor(video: Video){
        this.video = Video;
    }
}

const video = new Video("https://aaaaa.mp4")
const note = new Note(video)

クラスの外でビデオ クラスをインスタンス化し、パラメータ渡しを通じてそのインスタンスをノート クラスに渡します。過剰な結合の問題をうまく解決できます。パラメータを介してインスタンスを渡すこの方法をインジェクションと呼びます。

利点

依存性注入により、コード間の結合が軽減され、コードの保守性が向上します。 video クラスのコードを変更しても、note クラスには影響しません。

Angular の DI フレームワーク

上記の実装プロセスでは、特に理想的ではないことがまだ 1 つあります。それは、ビデオ クラスをクラスの外でインスタンス化する必要があるということです。 1 つだけですが、ビデオ クラスの内部変更がどのように変更されても、外部コードが影響を受けないことを願っています。

Angular が提供する DI フレームワークでは、ビデオ クラスを自分でインスタンス化する必要はありません。依存関係注入の実装プロセスが隠蔽されます。開発者にとっては、非常に単純なコードを使用するだけで済みます。洗練された依存関係注入機能。

Angular の DI には 4 つの中心的な概念があります。

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

• トークン: サービス インスタンス オブジェクトの識別子を取得します。Angular は多くのインスタンス オブジェクトを維持します。取得する必要がある場合は、識別子を通じて取得する必要があります。

• インジェクター: インジェクター: サービス クラスのインスタンス オブジェクトの作成と維持、サービス インスタンス オブジェクトのコンポーネントへの挿入、パラメーターを介した各コンポーネントへの受け渡しを担当します。

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

インジェクター injector

まず、提供されている基本構文を使用してインジェクターを作成します。 by Angular

1. インジェクターの作成

import { ReflectiveInjector } from "@angular/core"
//服务类
class Video{}
//创建注入器并传入服务类
const injector = ReflectiveInjector.resolveAndCreate([ Video ])

ReflectiveInjector を導入し、resolveAndCreate メソッドを使用してインジェクターを作成します。配列を受け取ります。配列にはインスタンスを作成する必要があるクラスがあります。このメソッドはインジェクターを返します。 2. インジェクターでサービス クラス インスタンス オブジェクトを取得します

const video = injector.get(Video)

インジェクターの下に get メソッドがあり、識別子を渡してインスタンス オブジェクトを取得するために使用されます。デフォルトの識別子はサービスの名前ですVideo

このようにして、Video のインスタンス オブジェクトを取得できます。Angular が提供する DI フレームワークを使用すると、インスタンス オブジェクトを取得するためにクラスを手動でインスタンス化する必要がなくなります。わたしたちのため。

2. サービスのインスタンス オブジェクトはシングルトン モードです。インジェクターは、サービス インスタンスの作成後にそれをキャッシュすることを後悔します。

const video1 = injector.get(Video)
const video2 = injector.get(Video)

console.log(video1 === video1)//true

つまり、インスタンス オブジェクトが何回キャッシュされても、フレームワークを通じて取得した場合、返されるインスタンス オブジェクトはすべて同じインスタンス オブジェクトです。

3. ただし、複数のインジェクターを作成できます。異なるインジェクターによって返される同じサービスによってインスタンス化されたオブジェクトは、同じではありません

const injector1 = ReflectiveInjector.resolveAndCreate([ Video ])
const injector2 = ReflectiveInjector.resolveAndCreate([ Video ])

const video1 = injector1.get(Video)
const video2 = injector2.get(Video)

console.log(video1 === video1)//false

4. インジェクター上にresolveAndCreateChildという子インジェクターを作成するメソッドがあります このメソッドは子インジェクターを作成します 親インジェクターと子インジェクターの関係はjsのスコープチェーンに似ています 現在のインジェクターは見つかりませんそれが到着すると、次のような親インジェクターを検索します:

const injector = ReflectiveInjector.resolveAndCreate([ Video ])
const injectorChild = injector.resolveAndCreateChild([])

const video1 = injector.get(Video)
const video2 = injectorChild.get(Video)

console.log(video1 === video1)//true

像上面这段代码，我们在创建子级注入器的时候，不传递参数，但是在子级注入器实例化的时候，由于自身不存在 Video 这个服务，它就会去父级查找，当然，就找到了父级的 Video 这个服务并且实例化，所以后面的两个实例化对象相等

总结

本文介绍了依赖注入解决的问题和它原生的写法是什么用的，并且介绍了Angular提供给我们的DI框架，用它提供给我们的简单api实现了实例化的过程，并且讲解了注入器，也是会分层级的，能提供给我们更好地一个项目设计方式。之后有机会再来讲解一下provider以及更多的扩展。

更多编程相关知识，请访问：编程视频！！

以上がAngular での依存関係の挿入を理解するためのステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。