Angular での依存関係注入の詳細な分析-jsチュートリアル-php.cn

Angular での依存関係注入の詳細な分析

青灯夜游

リリース： 2021-09-08 11:06:41

転載

1860 人が閲覧しました

依存性注入とは何ですか?この記事では、Angular での依存関係の挿入について説明します。お役に立てば幸いです。

Angular での依存関係注入の詳細な分析

依存性注入の概念:

Wikipedia による依存性注入の説明: ソフトウェアエンジニアリングでは、依存性注入は次のようになります。制御の反転を実装するソフトウェア設計パターン。依存関係とは、別のオブジェクト (クライアント) によって呼び出されるオブジェクト (サービス) です。インジェクションとは、依存オブジェクト (サービス) のインスタンスを依存オブジェクト (クライアント) に渡すことです。の動作。

DI の基本原則は、依存オブジェクト自体が必要なオブジェクトを作成したり検索したりする必要なく、依存オブジェクトを依存オブジェクトに渡すことです。

依存性注入により、依存性反転の原則に従うプログラミングが可能になります (簡単に言うと、実装ではなく抽象化のプログラミングが必要となり、クライアントと実装モジュール間の結合が軽減されます)。呼び出し元 (クライアント) のみサービスのインターフェイスを知る必要があります。特定のサービスの検索と作成はインジェクターによって処理され、クライアントに提供されます。これにより、サービスと呼び出し元の依存関係が分離され、低結合プログラミング原則に準拠します。これは依存関係注入の主な目的でもあります。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

制御の反転

制御の反転と依存関係の注入は次のとおりです。互いに補完的です。例: classA は classB に依存しますが、classA は classB のインスタンスを積極的に作成せず、それをパラメータとして渡します。

class A {
    construct(private b: B) {}
}
class B {}
const a: A = new A(new B());

ログイン後にコピー

Angular 依存関係の注入は、コンポーネントをインスタンス化するときにサービスのインスタンスが渡され、制御の反転を形成します。

依存関係の注入

Angular の依存関係の注入ではインスタンスが使用されます。これは、Angular がサービスを介して通信する方法でもあります。依存関係注入が適用されていない場合、複数のインスタンスやコンポーネント間通信でサービスを利用することができません。 app.module.ts:

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule, InjectionToken } from &#39;@angular/core&#39;;
import { AppComponent } from &#39;./components/app/app.component&#39;;
import { SingleServiceService } from &#39;./service/single-service.service&#39;;
import { MyServiceService } from &#39;./service/my-service.service&#39;;
import { UseServiceService } from &#39;./service/use-service.service&#39;;
import { ValueServiceService } from &#39;./service/value-service.service&#39;;
import { ReactiveFormsModule, FormsModule } from &#39;@angular/forms&#39;;
import { HttpClientModule } from &#39;@angular/common/http&#39;;

export interface AppConfig {
    title: string
}

export const CONFIG = new InjectionToken<AppConfig>(&#39;描述令牌的用途&#39;);

const USE_Config = {
    title: "非类的注入令牌"
}

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [
        SingleServiceService,
        // 完整形式
        // {provide: SingleServiceService, useClass: SingleServiceService}
        // provide 属性存有令牌，它作为一个 key，在定位依赖值和配置注入器时使用。
        // 属性二通知如何创建依赖，实际依赖的值可以是useClass、 useExisting、useValue 或 useFactory
        // useExisting起别名,依赖注入也可以注入组件
        {provide: MyServiceService, useClass: UseServiceService},
        // useValue可以是字符串，对象等
        {provide: ValueServiceService, useValue: "依赖注入字符"},
        // 使用 InjectionToken 对象来为非类的依赖选择一个提供者令牌
        { provide: CONFIG, useValue: USE_Config }
    ],
    bootstrap: [AppComponent],
    entryComponents: []
})
export class AppModule { }

ログイン後にコピー

SingleServiceService:

import { Injectable } from &#39;@angular/core&#39;;

@Injectable()
export class SingleServiceService {

constructor() { }

}

ログイン後にコピー

MyServiceService:

import { Injectable } from &#39;@angular/core&#39;;

@Injectable()
export class MyServiceService {

    constructor() { }

    getName(): string {
        return "my-service";
    }
    
}

ログイン後にコピー

UseServiceService:

import { Injectable } from &#39;@angular/core&#39;;

@Injectable()
export class UseServiceService {

    constructor() { }

    getName(): string {
        return "use-service";
    }

}

ログイン後にコピー

ValueServiceService:

import { Injectable } from &#39;@angular/core&#39;;

@Injectable()
export class ValueServiceService {

constructor() { }

}

ログイン後にコピー

続きプログラミング関連の知識について詳しくは、プログラミングビデオをご覧ください。！

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

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

Angular での依存関係注入の詳細な分析