Angular 2의 구성 요소 외부에 서비스를 주입하는 방법은 무엇입니까?

Angular 2의 종속성 주입: 구성 요소 외부에 서비스 주입

Angular 2에서는 @Component 데코레이터를 사용하여 구성 요소에 서비스를 주입하는 것이 간단합니다. . 그러나 구성 요소 외부에 서비스를 주입해야 하는 시나리오가 있습니다. 이 기사에서는 DI(종속성 주입)를 사용하여 이를 수행하는 방법을 살펴봅니다.

Injectable Services

서비스에 DI를 활성화하려면 @Injectable 데코레이터로 장식해야 합니다. . 이 데코레이터는 클래스를 주입 가능으로 표시하여 해당 매개변수가 주입될 수 있도록 합니다. "Injectable"이라는 이름은 클래스를 주입 가능하게 만드는 것이 아니라 해당 매개변수를 주입할 수 있다는 의미에서 주입 가능하게 만들기 때문에 약간 오해의 소지가 있습니다.

종속성 주입 메커니즘

Angular 2는 계층적 인젝터 시스템을 사용하며 각 레벨은 특정 구성 요소 또는 구성 요소 집합에 해당합니다. DI 시스템이 종속성을 발견하면 먼저 현재 인젝터를 살펴봅니다. 종속성이 발견되지 않으면 종속성에 대한 공급자를 찾을 때까지 인젝터 계층 구조 위로 이동합니다.

인젝터 전체에 서비스 주입

다른 서비스에 서비스를 주입하려면 서비스의 경우 종속 서비스 생성자에서 종속성을 정의하고 @Injectable 데코레이터를 종속 서비스에 추가하기만 하면 됩니다.

의 경우 예:

@Injectable()
export class MyFirstSvc {
  // ...
}

@Injectable()
export class MySecondSvc {
  constructor(private myFirstSvc: MyFirstSvc) {
    // ...
  }
}

이 예에서 MySecondSvc는 MyFirstSvc에 의존하며 MyFirstSvc를 사용할 수 있는 모든 인젝터에 주입될 수 있습니다.

공급자 정의

서비스 공급자를 지정하려면 @Component 또는 NgModule의 공급자 배열을 사용하세요. 데코레이터. 예를 들어 MyFirstSvc를 애플리케이션 인젝터에서 공급자로 정의하려는 경우 다음과 같이 정의할 수 있습니다.

@Component({
  // ...
  providers: [MyFirstSvc]
})
export class AppComponent {
  // ...
}

결론

계층 구조를 이해함으로써 인젝터와 @Injectable 데코레이터의 특성상 Angular 2의 구성 요소 외부에 서비스를 효과적으로 주입할 수 있습니다. 애플리케이션 전체에 쉽게 삽입하고 공유할 수 있는 재사용 가능한 서비스입니다.

위 내용은 Angular 2의 구성 요소 외부에 서비스를 주입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!