Angular의 종속성 주입에 대한 심층 분석

의존성 주입이란 무엇인가요? 이 글은 Angular의 의존성 주입을 안내할 것입니다. 도움이 되기를 바랍니다!

종속성 주입 개념:

Wikipedia의 종속성 주입 설명: 소프트웨어 엔지니어링에서 종속성 주입은 제어 반전을 구현하는 소프트웨어 설계 패턴입니다. (서비스) 클라이언트가 호출), 주입은 종속 개체(서비스) 인스턴스를 종속 개체(클라이언트)에 전달하는 행위입니다.

종속 개체가 필요한 개체를 만들거나 찾도록 요구하지 않고 종속 개체를 종속 개체에 전달하는 것이 DI의 기본 원칙입니다.

종속성 주입을 통해 프로그래밍은 종속성 반전 원칙을 따를 수 있습니다(간단히 말하면 구현이 아닌 추상화 프로그래밍이 필요하므로 클라이언트와 구현 모듈 간의 결합이 줄어듭니다). 호출자(클라이언트)는 서비스만 알면 됩니다. 인터페이스, 특정 서비스의 검색 및 생성은 인젝터에 의해 처리되고 클라이언트에 제공됩니다. 이는 서비스와 호출자의 종속성을 분리하고 낮은 결합 프로그래밍 원칙을 준수합니다. 이는 의존성 주입의 주요 목적이기도 합니다. [추천 관련 튜토리얼: "angular Tutorial"]

Inversion of Control

Inversion of Control과 종속성 주입은 서로 보완적입니다. 예: 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 '@angular/platform-browser';
import { NgModule, InjectionToken } from '@angular/core';
import { AppComponent } from './components/app/app.component';
import { SingleServiceService } from './service/single-service.service';
import { MyServiceService } from './service/my-service.service';
import { UseServiceService } from './service/use-service.service';
import { ValueServiceService } from './service/value-service.service';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

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 '@angular/core';

@Injectable()
export class SingleServiceService {

constructor() { }

}

MyServiceService:

import { Injectable } from '@angular/core';

@Injectable()
export class MyServiceService {

    constructor() { }

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

UseServiceService:

import { Injectable } from '@angular/core';

@Injectable()
export class UseServiceService {

    constructor() { }

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

}

ValueServiceService:

import { Injectable } from '@angular/core';

@Injectable()
export class ValueServiceService {

constructor() { }

}

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 Angular의 종속성 주입에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!