Angular 2의 다른 서비스에 서비스를 어떻게 주입할 수 있나요?

Angular 2(베타)에서 다른 서비스에 서비스 삽입

@Component 데코레이터를 사용하면 구성 요소에 서비스를 삽입하는 것이 간단합니다. 그러나 구성 요소 외부에 서비스를 삽입하는 것은 문제가 됩니다.

문제 설명

Angular 2에서는 다음에서 볼 수 있듯이 다른 서비스 내에서 서비스를 수동으로 인스턴스화하는 것을 피하고 싶습니다. 다음 코드 snippet:

export class MyFirstSvc {

}

export class MySecondSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}

export class MyThirdSvc {
    constructor() {
        this.helpfulService = new MyFirstSvc();
    }
}

해결책

해결책은 주입하려는 서비스에 @Injectable 데코레이터를 사용하는 것입니다. 이 데코레이터는 종속성 주입을 위해 서비스의 생성자 매개변수를 준비합니다.

인젝터 계층

주입이 어떻게 작동하는지 이해하려면 인젝터 계층의 개념을 이해하는 것이 중요합니다.

• 애플리케이션 인젝터: 다음을 사용하여 구성됨 부트스트랩 함수의 두 번째 매개변수.
• 컴포넌트 인젝터: 컴포넌트의 공급자 속성을 사용하여 구성됩니다. 상위 인젝터에 정의된 공급자를 참조할 수 있습니다.

서비스를 구성 요소나 다른 서비스에 주입할 때 Angular2는 다음 순서로 공급자를 검색합니다.

1. 구성 요소 인젝터
2. AppComponent Injector
3. 애플리케이션 인젝터

공급자 공유

인젝터 계층 구조를 통해 서비스 인스턴스의 공유를 제어할 수 있습니다.

• 애플리케이션 수준 공급자: 전체에서 공유됨 애플리케이션.
• 구성 요소 수준 공급자: 구성 요소, 해당 하위 구성 요소 및 해당 종속성 체인과 관련된 서비스 내에서 공유됩니다.

예

@Injectable()
export class Service1 {
  constructor(service2:Service2) {
    this.service2 = service2;
  }

  getData() {
    return this.service2.getData();
  }
}

@Injectable()
export class Service2 {

  getData() {
    return [{ message: 'message1' }, { message: 'message2' }];
  }
}

이에 예:

• Service1은 Service2에 종속됩니다.
• ChildComponent에서 Service1을 인스턴스화할 때 Angular2는 먼저 ChildComponent 인젝터에서 Service1을 검색한 다음 AppComponent 인젝터에서, 마지막으로 Application에서 검색합니다.
• 마찬가지로 Service1 내에서 Service2를 인스턴스화할 때 Angular2는 다음을 따릅니다. 동일한 계층 구조.
• 인젝터 계층 구조와 공급자 위치 지정을 통해 애플리케이션 요구 사항에 따라 유연한 종속성 공유가 가능합니다.

리소스

• [Angular2 계층적 종속성 주입 가이드](https://angular.io/docs/ts/latest/guide/hierarchical-dependent-injection.html)
• [Plunkr 예시](https://plnkr.co/edit/PsySVcX6OKtD3A9TuAEw? p=미리보기)

위 내용은 Angular 2의 다른 서비스에 서비스를 어떻게 주입할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!