2016-06-16 7 views
27

Angular2 구성 요소 구성에서 providers은 우리가 지정할 수있는 키 중 하나입니다. 이 공급자는 어떻게 정의되며 용도는 무엇입니까?Angular2의 제공 업체는 무엇입니까?

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

:

Angular2 문서는 점차 성숙하지만 여전히 드문 드문있다. 그것은 현재로서 제공자 정의

성분 필요한 서비스에 대한 의존성 주입 제공자의 배열.

이 재귀 적 정의는별로 도움이되지 않습니다. 예를 들어 자세한 설명을하면 도움이 될 것입니다.

답변

34

공급자는 다른 개체 의존성 주입 (DI)를 통해 액세스를 가지고, (인스턴스) 개체 싱글 일반적이다.

다른 구성 요소에서 서비스를 여러 번 사용하려는 경우 (예 : Http) 해당 서비스의 동일한 인스턴스를 요청 (재사용) 할 수 있습니다. 당신은 에 의해 DI의 도움을 받아에 DI가 당신을 위해 생성하는 동일한 객체에 대한 참조를 제공합니다. 새로운 객체를 매번 생성하는

@Component){ 
    .. 
    providers: [Http] 
} 

..instead :

@Component){} 
class Cmp { 
    constructor() { 
    // this is pseudo code, doens't work 
    this.http = new Http(...options); 
    } 
} 

이 제품은 근사하지만, 그 Dependency Injection 뒤에 일반 아이디어 - 프레임 워크 핸들 생성 및 재사용 가능한 객체의 유지 보수를 할 수 ...공급자은 이러한 재사용 가능한 객체 (의존성)에 대한 Angular의 용어입니다.

10

등록 주사제

공급자는 각도의 DI로 알려진 주사제를 만들어 주사 (서비스)의 범위를 정의합니다. 계층 구조 인젝터

각도의 DI의

는 인젝터 (부모> 아이> 손자> ...) 즉, 컴포넌트 및 지침의 구조와 유사한 트리를 만듭니다. 업체 당

단일 인스턴스

공급자는 인젝터 당 유지됩니다. 각 제공자는 주사제의 단일 인스턴스를 제공합니다.

제공자 조회 구성 요소 나 지시가 종속성 (생성자 매개 변수)가

, DI는 공급자에 대한이 구성 요소의 인젝터 찾고 시작합니다. 인스턴스가있는 경우이 공급자의 인스턴스를 요청하고 인스턴스를 주입합니다.

인젝터에 요청 된 키 (유형)에 대한 제공 업체가없는 경우 상위 인젝터는 제공자가 발견되어 인스턴스가 삽입 될 때까지 루트 (부트 스트랩)까지 방문됩니다. (제공자가 발견되지 않으면 DI가 오류를 던집니다.) DI는이 하나를 찾을 때까지 인스턴스가 위쪽으로 요청 된 구성 요소에서 찾고 시작하기 때문에

는 주사 예를

는 공유 서비스의 범위를 정의 할 수 있습니다이 방법의 범위를 정의합니다.

싱글 여부를 (실제로 요청하는 경우 그들은 단지 인스턴스화) 얼마나 많은 곳이 많은 경우가 생성되는 방법을 주사 결정 제공

.

전체 응용 프로그램에 대해 단일 인스턴스를 원할 경우 루트 구성 요소에 (또는 동일한 동작을 초래하는 bootstrap(AppComponent, [...]))을 삽입 한 후 번만 제공하십시오.

각 구성 요소에 대한 새 인스턴스가 A 인 경우 구성 요소 제공자 인 A에 해당 인스턴스를 추가하십시오.

은 (갱신) NgModule는 게으르고 NgModule 모듈의 도입

비 지연, 추가 레벨이 소개되었다. 비 지연로드 모듈에 등록 된 공급자는 계층 구조의 루트 구성 요소 위에 있습니다.

지연로드 모듈은 이러한 구성 요소에 의해로드 된 구성 요소 및 지시문 위에 있습니다.

인젝터를 만든 후에 공급자가 읽기 전용이므로 게으른로드 모듈에서 루트 인젝터로 공급자를 추가 할 수 없습니다. 따라서 게으른로드 된 모듈은 자체 루트 범위를 갖습니다.

는 서비스를 주입하는 방법을 각 알려주는 레시피와 같은 공급 업체의 https://stackoverflow.com/a/45231440/217408

+1

항상 @ Günter Zöchbauer 당신은 나를 위해 그것을 명확히했습니다. 고맙습니다. 나는 항상 각도 js 쿼리에 대한 답을 따릅니다. – anz

+0

당신을 진심으로 환영합니다. 다행 :) –

6

생각해도 참조하십시오. 두 가지 접근법이 말하는

[new Provider(AnyService, {useClass: AnyService})] 

:

providers: [AnyService] 

이이에 대한 짧은 손으로 :

우리는 종종 각도 이런 식으로 공급자를 선언 누군가가 "AnyService"을 필요로 할 때마다 제공 "AnyService"클래스

위 예제에서 동일한 클래스를 제공하고 있지만 다른 시나리오에서는 이와 비슷한 것을 할 수 있습니다.

[new Provider(AnyService, {useClass: AnyServiceCustom})] 

그러나 두 시나리오에서

는, 생성자는 동일하게 유지합니다 :

constructor(private _anyService: AnyService) { 
} 

당신이 업체는 직접 관련이 같은 의존성 주입 각도이 어떻게 작동하는지 이해하는 데 필요한 더 잘 이해하기 위해서.

모든 앵귤러 2 현상액에 대해 반드시 읽어야합니다.

https://angular.io/docs/ts/latest/guide/dependency-injection.html?The%20Provider%20class%20and%20provide%20function#!#injector-providers

관련 문제