Привет, Хабр! Представляю вашему вниманию перевод статьи «Различные способы передачи входных данных компоненту в Angular» Нетанель Базал.
В этой статье мы рассмотрим три различных способа передачи данных в компонент. В следующем примере мы будем использовать выбирать в качестве основного компонента, но используемые в нем методы актуальны и в других компонентах.
Давайте создадим компонент выбирать который получает следующие входные данные — размер И размещение .
Использование входов
Первый метод, с которым мы все знакомы, — это использование декоратора.Вход .
И этот код прекрасно работает, вот только он не такой гибкий.@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' }
Например, нам нужно установить переменную размер значение большой для всех выбирать в нашем приложении.
Таким образом, мы должны разрешить клиенту перезаписывать любые входные данные на глобальном уровне.
Использование внедрения зависимостей
Для этого мы можем использовать функцию внедрения зависимостей 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
}
}
Во-первых, нам нужно создать конфигурацию провайдера.
Этот провайдер может использоваться как жетон , тип , а также установить значения по умолчанию для каждого вход .
Давайте используем это в нашем компоненте выбирать : @Component({
selector: 'app-select',
template: `
<p><b>Size</b> {{ size }}</p>
<p><b>Placement:</b> {{ placement }}</p>
`
})
export class SelectComponent {
@Input() size: SelectConfig['size'];
@Input() placement: SelectConfig['placement'];
constructor(private config: SelectConfig) {
this.size = config.size;
this.placement = config.placement;
}
}
Теперь мы можем переписать выбранные входные данные на уровне нашего приложения: @NgModule({
providers: [
{
provide: SelectConfig,
useValue: setSelectConfig({
size: 'lg'
})
}
]
bootstrap: [AppComponent]
})
export class AppModule { }
Но это не все.
Мы также можем использовать это для передачи различных входы на уровне компонентов.
Например, у нас есть компонент, который мы используем в приложении несколько раз.
В каждом случае нам нужно использовать величину маленький : @Component({
selector: 'app-todos-page',
template: `<app-select></app-select>`,
providers: [
{
provide: SelectConfig,
useValue: setSelectConfig({
size: 'sm'
})
}
]
})
export class TodosPageComponent {}
Мы можем добавить это в компонент поставщики и это значение будет использоваться для всех объявленных и дочерних компонентов в шаблонах.
Но мы все равно можем переписать эту переменную напрямую следующим образом: @Component({
selector: 'app-todos-page',
template: `
<app-select></app-select>
<app-select size="lg"></app-select>
`,
providers: [
{
provide: SelectConfig,
useValue: setSelectConfig({
size: 'sm'
})
}
]
})
export class TodosPageComponent {}
Та же стратегия используется для ленивые модули потому что это создает новую инъекцию.
Использование директив
Допустим, у нас есть компоненты с несколькими входами.Для большинства из них мы устанавливаем одинаковые значения.
В примере это будет выглядеть так: <!-- It can be in the same template or in different places in the app -->
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>
Мы можем повторить эти значения, а можем создать директиву, которая будет передавать необходимые значения для всех переменных: @Directive({
selector: '[selectConfigOne]',
providers: [{
provide: SelectConfig,
useValue: setSelectConfig({
size: 'lg',
placement: 'right',
inputThree: 'someValue'
})
}]
})
export class SelectConfigOneDirective {}
И мы можем использовать эту директиву там, где нам нужно: <h1>Using Inputs</h1>
<app-select size="lg"></app-select>
<app-select placement="top"></app-select>
<h1>Using a Directive</h1>
<app-select selectConfigOne></app-select>
<app-todos-page></app-todos-page>
Теги: #angular #input #injection #directives
-
Пиратство Просочилось В Тюрьмы
19 Oct, 24 -
Связь-Экспокомм 2008
19 Oct, 24 -
Приложения Iphone В Социальных Сетях
19 Oct, 24
