Angular의 DI는 구성 요소를 더 스마트하게 만들 수 있습니다.

Angular에 내장된 종속성 주입은 매우 강력하며 오늘 우리는 이를 사용하여 구성 요소를 스마트하게 만드는 방법을 살펴보겠습니다.

버튼 구성요소에 대해 알아보겠습니다.

<app-button  
accent=" primary | danger | success | ... "
size =" small | medium | large | cta | ... "
icon = "[ ... ]"
iconSize = "sm | md | lg | ..."
label = "[ ... ]"
translate = " true | false "
ripple = " true | false "
tooltip = "true | false"
...
 >
</app-button>

여기에서 버튼 구성 요소가 다양한 구성 옵션을 제공하여 다양한 사용 사례를 처리하는 데 사용할 수 있음을 알 수 있습니다.

이러한 모든 입력을 항상 제공하는 것은 번거로울 수 있으며 불일치로 이어질 수도 있습니다.

이 문제를 해결하기 위해 먼저 애플리케이션에서 버튼을 배치할 수 있는 모든 위치를 찾아야 합니다.

예를 들어


장소
버튼 크기
아이콘 크기
도구 설명 표시
아이콘만
...


앱 헤더
크기가 큰
엘지
거짓
거짓

카드 헤더
중간
메릴랜드
거짓
거짓

테이블 행
SM
SM
진실
진실



버튼이 어떻게 그리고 어디에 사용될 것인지에 대한 명확한 아이디어가 있으면 컨텍스트에서 값을 추론할 수 있는 모든 입력에 대해 Angular의 주입 토큰을 만들 수 있습니다.

 const BUTTON_SIZE_HINT_TOKEN = new InjectionToken<
    small | medium | large | cta | ... 
>('Button size hint token', {
    providedIn: 'root',
    factory: () => 'medium' // default value
});

 const BUTTON_ICON_HINT_TOKEN = new InjectionToken<
    lg | md | sm | hide | ... 
>('Button size hint token', {
    providedIn: 'root',
    factory: () => 'md' // default value
});

const BUTTON_TOOLTIP_HINT_TOKEN = new InjectionToken<
    boolean
>('Button size hint token', {
    providedIn: 'root',
    factory: () => false // default value
});

...

이러한 토큰을 만든 후에는 버튼 구성 요소에서 사용해야 합니다.

// button.component.ts
// ...
// ... code ommited for brevity


 constructor(
    @Inject(BUTTON_SIZE_HINT_TOKEN)
    private  buttonSize:   small | medium | large | cta | ... ,

    @Inject(BUTTON_ICON_HINT_TOKEN)
    private iconSize: lg | md | sm | hide | ...,

    @Inject(BUTTON_TOOLTIP_HINT_TOKEN)
    private showToolTip: boolean,

// ... other dependecies
    ){}

여기에서 이러한 힌트를 사용하여 버튼 구성 요소의 기본값을 설정할 수 있습니다.

다음 단계는 버튼이 사용될 위치에 이러한 힌트를 제공하는 것입니다.

@Component({
    selector: 'app-page-header',
    templateUrl: './template-file.html',
    providers: [
        {
            provide: BUTTON_SIZE_HINT_TOKEN,
            useValue: 'large'
        },
        {
            provide: BUTTON_ICON_HINT_TOKEN,
            useValue: 'lg'
        },
        {
            provide: BUTTON_TOOLTIP_HINT_TOKEN,
            useValue: false
        },

    ]
})
export class AppPageHeaderComponent {

@Component({
    selector: 'app-table',
    templateUrl: './template-file.html',
    providers: [
        {
            provide: BUTTON_SIZE_HINT_TOKEN,
            useValue: 'sm'
        },
        {
            provide: BUTTON_ICON_HINT_TOKEN,
            useValue: 'sm'
        },
        {
            provide: BUTTON_TOOLTIP_HINT_TOKEN,
            useValue: true
        },

    ]
})
export class TableComponent {

@Component({
    selector: 'app-card-header',
    templateUrl: './template-file.html',
    providers: [
        {
            provide: BUTTON_SIZE_HINT_TOKEN,
            useValue: 'medium'
        },
        {
            provide: BUTTON_ICON_HINT_TOKEN,
            useValue: 'md'
        },
        {
            provide: BUTTON_TOOLTIP_HINT_TOKEN,
            useValue: false
        },

    ]
})
export class AppCardHeaderComponent {

이렇게 하면 버튼 구성 요소가 컨텍스트 자체에서 가져오기 때문에 앱 버튼을 사용하는 동안 buttonSize, buttonIconSize 및 showToolTip 플래그를 지정할 필요가 없습니다.

이 접근법을 찾는 방법을 알려주십시오!

고맙습니다!