Angular2 Dependency Injection - 의미가 있습니까? 문서로

Question

는

의존성 삽입 (Dependency Injection) 코드 종속성

을 관리하기위한 강력한 패턴이다 그러나 각도의 DI는 어떤 의미를 가지고 난데?

HeroComponent가 HeroModule에 있고 HeroService를 사용한다고 가정 해 보겠습니다. 유형을 추가

HeroComponent

에 모듈 공급 업체

가져 오기 HeroService에 HeroModule

를 주입 HeroService에

1. 가져 오기 HeroService 또는 구성 요소의 매개 변수에 주입 서비스를 추가 : 는 우리가 가지고 HeroComponent에서 사용합니다.

왜 HeroComponent에 그냥

1. 수입 HeroService합니까?

우리는 애플 리케이션 전체에 싱글 톤을 가질 수 있도록 인스턴스를 내보낼 수 있으며 테스트 중에 실제 구현 대신 모조를 가져올 수 있도록 webpack/karma를 구성 할 수 있습니다.

누군가 Angular의 DI를 사용하면 아키텍처가 밀접하게 결합되지 않지만 사실입니까? Angular 1.x에서는 실제로 생성자에서 params를 지정했습니다. 그러나 Angular2에서는 종속성을 추가로 가져와야하고 어디에서 지정해야합니다. 그렇다면 느슨하게 결합 된 부분은 어디입니까?

예 :

import { Http } from 'angular2/http'; 

export class Login { 
    constructor(http: Http) { 
    http.whatever() 
    } 
} 

우리의 주입을 실행할 수 있으려면, 우리는 그것을 가져올 수 있습니다. 그리고 우리가 수입 할 때, 우리는 정확히 어떤 서비스를 사용할 것인지를 정의합니다. 위와 아래의 예와 차이가 보이지 않습니다.

import { http } from 'angular2/http'; (instance) 

export class Login { 
    constructor() { 
    http.whatever() 
    }} 

Answer 1

종속성 주입은 가져 오지 않습니다. 그것은 당신이 당신의 구성 요소의 바깥에 당신을 위해 만들어진 인스턴스를 갖는 것에 관한 것입니다. DI없이 HeroComponent 여전히 HeroService에 대한 import 문을 추가해야하고 수동 HeroComponent 내부 인스턴스화해야 할 것 :

myHeroService: HeroService = new HeroService(); 

지금 당신은 세 가지 구성 요소에서이 서비스를 사용할 필요가 상상한다. 그런 다음 위의 행을 세 가지 다른 위치에 작성해야합니다.

실제 서비스가 준비되지 않았거나 (단위 테스트를위한 모의 서비스를 원한다면) 모의 서비스를 사용해야하는 경우 어떻게해야합니까? DI없이 당신은 이런 식으로 세 가지 구성 요소의 코드를 수정해야 할 것 :

myHeroService: MockHeroService = new MockHeroService(); 

를 DI로 세 가지 구성 요소 각각 위의 시나리오, 예를 들어,에서 수정하지 않을 것 같은 생성자를 가질 것:

class HeroComponent{ 

    constructor(heroService: HeroService){} 
} 

MockHeroService로 전환은 HeroModule 선언에 하나의 변화 (공급자) 필요 :

@NgModule({ 
... 
providers:[provide: HeroService, useClass: MockHeroService] 
}) 

위의 코드는 전체 모듈에 대한 싱글을 만들 각도 지시 할 것 (응용 프로그램)을 . 당신이 HeroService의 하나 개 이상의 인스턴스를 도입하기로 결정한다면 그냥 providers:[HeroService]를 선언, (예를 들어 HeroComponent1이 HeroService를 사용하고 HeroComponent2이 MockHeroService를 사용)를 HeroComponent1 :

@Component({ 
... 
providers:[HeroService] 
}) 

이제 각도가 전체 앱의 MockHeroService 인스턴스를 생성하고 HeroComponent1 및 그 하위에 대한 HeroService의 또 다른 인스턴스입니다.

이 서비스를 사용하는 구성 요소에서 생성자의 서명을 변경할 필요가 없습니다.

이제 한 구성 요소에서 HeroService 또는 MockHeroService을 조건부로 인스턴스화하는 팩토리 함수를 도입하고자한다고 가정 해보십시오. useFactory 구문을 사용하여 해당 구성 요소의 공급자를 선언하기 만하면됩니다.

나는 계속 갈 수 있습니다.