Angular 의존성 주입 - (2) 프로바이더 (Provider)

프로바이더 (Provider)

Angular는 서비스의 인스턴스 생성과 구성요소에 그 서비스를 주입하는 권한을 위임 받았다. 그러나, Angular는 인스턴스를 어떻게 생성하는지 모르므로 이를 알려줘야 한다. 그 역할을 프로바이더가 한다.

따라서 프로바이더는 Angular에 의존성 인스턴스의 생성 정보를 알린다.

프로바이더 사용 방법

@Injectable의 provideIn 프로퍼티

// 루트 인젝터에 제공
@Injectable({
    providedIn: 'root',
})

// 특정 모듈에 등록
// 그 모듈의 **모든 구성요소에서 주입할 수 있음.**
@Injectable({
    providedIn: YourModule,
})

@Component 메타데이터의 providers 프로퍼티

    // 해당 컴포넌트와 하위 컴포넌트에 주입할 수 있음.
@Component({
    ...
    providers: [TempService]
})

@NgModule 메타데이터의 providers 프로퍼티

// 그 모듈의 **모든 구성요소에서 주입할 수 있음.**
@NgModule({
    ...
    providers: [TempService]
})

프로바이더의 종류

• 클래스 프로바이더 : 앞에서 설명했으므로 생략
• 값 프로바이더
• 팩토리 프로바이더

값 프로바이더

주입 대상의 타입이 클래스가 아닌 문자열, 숫자, 불리언 타입일 경우

providers: [
    {
        provide: 'API',
        useValue: 'https://api.myserver.com/get'
        // provide 토큰을 클래스로 지정할 수 없으므로 문자열로 한다.
    }
]

~

constructor(
    // 문자열은 타입 추론이 안되므로 @Inject 데코레이터를 사용한다.
    @Inject('API') private api: string
)

팩토리 프로바이더

의존성 인스턴스를 생성할 때 어떠한 로직을 거쳐야 할 때, 팩토리 함수를 통해 로직을 처리하고 인스턴스를 생성한다.

~~.service.provider.ts를 만들어서 팩토리 프로바이더와 팩토리 함수를 정의한다. 아래 예시를 보자.

import { TestService } from './test-service-1';
import { MockTestService } from './test-service-2';

// Factory Function
const factoryFunc = (param) => param ? new TestService : new MockTestService;

// Factory Provider
export const TestServiceProvider = {
    provide: TestService, 
    use**Factory**: factoryFunc, // 팩토리 함수 등록
    deps: ['param']
};

// Provider that injects value to factory function
export const SetParamProvider = {
    provide: 'param',
    useValue: false
}

~

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

• provide : 최종적으로 생성될 인스턴스 Type
• useFactory : 사용할 팩토리 함수
• deps : 팩토리 함수에 주입할 의존성 토큰 배열