Привет, Хабр! Представляю вашему вниманию перевод статьи «Different Ways to Pass Inputs to a Component in Angular» автора Netanel Basal.
В этой статье, мы разберём три разных способа передачи данных в компонент. В следующем примере мы будем использовать select как главный компонент, но методы, используемые в нём релевантны и в других компонентах.
Создадим компонент select, который получает следующие входные данные — size и placement.
Первый метод, с которым мы все знакомы — использование декорантора Input.
И этот код отлично работает, за исключением того, что он не такой гибкий. Например нам нужно задать переменной size значение large для любого select в нашем приложении. Таким образом мы должны разрешить клиетну переписать любой input на глобальном уровне.
Для этого мы можем использовать функцию внедрения зависимостей Angular.
Для начала нам нужно создать конфигурацию провайдера. Этот провайдер может быть использован как token, type, а также задавать значения по умолчанию для каждого input. Используем это в нашем компоненте select:
В этой статье, мы разберём три разных способа передачи данных в компонент. В следующем примере мы будем использовать select как главный компонент, но методы, используемые в нём релевантны и в других компонентах.
Создадим компонент select, который получает следующие входные данные — size и placement.
Использование Inputs
Первый метод, с которым мы все знакомы — использование декорантора Input.
@Component({
selector: 'app-select',
template: `
<p><b>Size</b> {{ size }}</p>
<p><b>Placement:</b> {{ placement }}</p>
`
})
export class SelectComponent {
@Input() size: 'sm' | 'md' | 'lg' = 'md';
@Input() placement: 'top' | 'bottom' | 'right' | 'left' = 'bottom'
}
И этот код отлично работает, за исключением того, что он не такой гибкий. Например нам нужно задать переменной size значение large для любого select в нашем приложении. Таким образом мы должны разрешить клиетну переписать любой input на глобальном уровне.
Использование зависимости Injection
Для этого мы можем использовать функцию внедрения зависимостей Angular.
import { InjectionToken, Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class SelectConfig {
size: 'sm' | 'md' | 'lg' = 'md'
placement: 'top' | 'bottom' | 'right' | 'left' = 'bottom';
}
export function setSelectConfig(config: Partial<SelectConfig>) {
return {
...new SelectConfig(),
...config
}
}
Для начала нам нужно создать конфигурацию провайдера. Этот провайдер может быть использован как token, type, а также задавать значения по умолчанию для каждого input. Используем это в нашем компоненте select:
