この記事では、依存性注入について理解し、依存性注入によって解決される問題とそのネイティブの記述方法を紹介し、Angular の依存性注入フレームワークについて説明します。 !
最近、Angular プロジェクトで依存関係注入というキーワードをよく目にしますが、それがどのように実装されているのかまだ理解できません。Angular の情報しかありません。 official website. 利用原理は詳しく説明されていないので、ネイティブの書き方から、どのような問題を解決するために依存性注入を使うのか、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 サイトの他の関連記事を参照してください。

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

Angular Route中怎么提前获取数据?下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法,希望对大家有所帮助!

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
