의존성 주입은 Angular 2 구성 요소 이상으로 어떻게 작동하나요?

Angular 2(베타)에서 서비스 주입

Angular 2에서는 구성 요소에 서비스를 주입하는 것이 간단하지만 어떻게 활용할 수 있나요? 컴포넌트를 넘어서 서비스를 전송하기 위해 DI(종속성 주입)를 사용하시겠습니까?

삽입 구성 요소 외부 서비스

이를 달성하기 위해 @Injectable 데코레이터를 사용하여 원하는 서비스에 주석을 추가합니다. 이 데코레이터는 주석이 달린 클래스의 생성자 내의 매개변수가 주입을 받아야 함을 나타냅니다.

주입 메커니즘 이해

Angular 2의 DI 메커니즘은 다음 트리에서 작동합니다. 계층 구조로 연결된 인젝터. 이러한 인젝터는 구성 요소 트리에 매핑되지만 서비스에 대한 특정 인젝터는 없습니다.

서비스에 @Injectable 주석이 추가되면 Angular는 현재 인젝터 내에서 해당 서비스 유형에 대한 인스턴스를 생성하거나 검색하려고 시도합니다. 실행 체인.

예: 서비스 주입 체인

고려 다음 샘플 애플리케이션:

• AppComponent(주 구성 요소)
• ChildComponent(하위 구성 요소)
• Service1(ChildComponent에서 사용)
• Service2(사용) 서비스별1)

각 서비스와 구성요소는 @Injectable로 주석 처리됨.

인젝터 계층 구조 및 서비스 주입

이 애플리케이션에는 3개의 인젝터가 있습니다.

• 애플리케이션 인젝터(구성됨) 부트스트래핑 중)
• AppComponent 인젝터(다음을 통해 구성됨) 공급자 속성)
• ChildComponent 인젝터(유사하게 구성됨)

Service1을 ChildComponent에 주입할 때 Angular는 먼저 ChildComponent 인젝터에서 Service1 공급자를 검색한 다음 AppComponent 인젝터에서, 마지막으로 Service1 공급자를 검색합니다. 애플리케이션 인젝터에.

마찬가지로 Service2를 인젝션할 때 Service1에서도 동일한 검색 프로세스가 발생합니다.

공급자 범위 및 인젝터 계층

이 검색 프로세스는 서비스 인스턴스를 인스턴스화하고 공유할 위치를 결정합니다. 공급자는 다양한 수준에서 지정할 수 있습니다.

• 애플리케이션 수준: 인스턴스는 애플리케이션 전체에서 공유됩니다.
• 구성 요소 수준: 인스턴스는 구성 요소, 해당 하위 구성 요소 및 종속 항목 내에서 공유됩니다. services.

결론

@Injectable 데코레이터를 활용하고 Angular 2의 DI 메커니즘을 이해함으로써 구성 요소와 서비스 간에 서비스를 효과적으로 주입할 수 있습니다. 필요에 따라 종속성을 정리하고 공유합니다.

위 내용은 의존성 주입은 Angular 2 구성 요소 이상으로 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!