Привет, Хабр! Представляю вашему вниманию перевод статьи
«Different Ways to Pass Inputs to a Component in Angular» автора Netanel Basal.
В этой статье, мы разберём три разных способа передачи данных в компонент. В следующем примере мы будем использовать
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:
