検索
ホームページウェブフロントエンドjsチュートリアル依存性注入とは何ですか? Angular で実装するにはどうすればよいですか?

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

依存性注入とは何ですか? 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 サイトの他の関連記事を参照してください。

声明
この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
聊聊Angular中的元数据(Metadata)和装饰器(Decorator)聊聊Angular中的元数据(Metadata)和装饰器(Decorator)Feb 28, 2022 am 11:10 AM

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

angular学习之详解状态管理器NgRxangular学习之详解状态管理器NgRxMay 25, 2022 am 11:01 AM

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

浅析angular中怎么使用monaco-editor浅析angular中怎么使用monaco-editorOct 17, 2022 pm 08:04 PM

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

项目过大怎么办?如何合理拆分Angular项目?项目过大怎么办?如何合理拆分Angular项目?Jul 26, 2022 pm 07:18 PM

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

聊聊自定义angular-datetime-picker格式的方法聊聊自定义angular-datetime-picker格式的方法Sep 08, 2022 pm 08:29 PM

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

Angular + NG-ZORRO快速开发一个后台系统Angular + NG-ZORRO快速开发一个后台系统Apr 21, 2022 am 10:45 AM

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

聊聊Angular Route中怎么提前获取数据聊聊Angular Route中怎么提前获取数据Jul 13, 2022 pm 08:00 PM

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

浅析Angular中的独立组件,看看怎么使用浅析Angular中的独立组件,看看怎么使用Jun 23, 2022 pm 03:49 PM

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

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

DVWA

DVWA

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

PhpStorm Mac バージョン

PhpStorm Mac バージョン

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

SublimeText3 Mac版

SublimeText3 Mac版

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

MinGW - Minimalist GNU for Windows

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

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境