의존성 주입하기

Angular의 의존성 주입(Dependency Injection, DI) 시스템을 활용하려면 의존성으로 주입가능한 서비스를 만드는 것이 첫 시작입니다. 그런데 서비스는 컴포넌트로 어떻게 주입할까요? Angular는 이 경우에 사용할 수 있는 inject() 함수를 제공합니다.

참고: 의존성 주입 객체의 컨텍스트는 이 문서에서 다루지 않습니다. 자세한 내용은 의존성 주입 핵심 가이드 문서와 의존성 주입 컨텍스트 가이드 문서를 참고하세요.

이번 튜토리얼에서는 서비스 클래스를 의존성 객체로 어떻게 주입하는지, 컴포넌트에서 어떻게 사용하면 되는지 알아봅시다.

의존성으로 주입하는 클래스 프로퍼티는 프로퍼티를 선언하면서 주입하는 것이 편리합니다. 예제를 봅시다:

      
@Component({...})class PetCareDashboard {    petRosterService = inject(PetRosterService);}
    

1. CarService를 의존성으로 주입합니다

   app.ts 파일에서 inject() 함수를 사용해서 carService 프로퍼티에 CarService를 의존성으로 주입합니다.

   참고: 프로퍼티 carService와 클래스 CarService는 다릅니다.

2. carService 인스턴스를 사용해 보세요

   inject(CarService)를 실행해서 CarService의 인스턴스를 가져온 뒤에는 이 인스턴스를 carService 프로퍼티에 할당해서 활용할 수 있습니다.

   아래 예제처럼 display 프로퍼티를 선언해 봅시다:

         
   display = this.carService.getCars().join(' ⭐️ ');
       

3. App 컴포넌트의 템플릿을 수정하세요

   app.ts 파일의 컴포넌트 템플릿을 수정해 봅시다:

         
   template: `<p>Car Listing: {{ display }}</p>`,
       

이제 서비스를 컴포넌트로 의존성 주입할 수 있게 되었습니다. 아주 훌륭합니다!