Добавьте сверхспособности к вашим входным данным Angular 🔋 (Новая функция 🎉)
Входные данные - это мощный способ взаимодействия между компонентами. Они используются для передачи данных от родительского компонента к дочернему компоненту. В этой статье мы увидим, как добавить сверхспособности ⚡️ к нашим входным данным с помощью новой функции, которая будет представлена в ближайшее время.
Бывают случаи, когда мы хотим преобразовать значение входных данных, когда оно передается дочернему компоненту. Например, мы хотим отформатировать дату, или мы хотим добавить префикс или суффикс к строке, преобразовать строку в число или преобразовать строку в логическое значение. Сегодня мы можем сделать это, используя getter и setter.
Давайте возьмем преобразование строки в логическое значение в качестве примера, поскольку это один из наиболее часто используемых способов.
const toBoolean = (value: boolean | string): boolean => {
return value != null && `${value}` !== 'false';
};
@Component({ selector: 'app-test', template: `` })
export class TestComponent {
_show = false;
@Input() set show(v: boolean | string) {
this._show = toBoolean(v);
}
get show() {
return this._show;
}
}Нам нужно так, потому что мы хотим поддерживать как логические, так и строковые значения, поэтому его можно использовать так:
<app-test show /> <!-- just setting the attribute -->
<app-test show="true" /> <!-- static attribute binding -->
<app-test [show]="true" /> <!-- dynamic attribute binding -->Это распространенный шаблон, который мы используем в наших компонентах. Мы можем сделать это лучше, используя новую функцию, которая будет представлена в ближайшее время. Мы можем использовать свойство transform декоратора @Input для преобразования значения input:
@Component({ selector: 'app-test', template: `` })
export class TestComponent {
@Input({ transform: (v: boolean | string) => v != null && `${v}` !== 'false' })
show: boolean = false;
}Мы также можем переместить функцию преобразования в отдельную функцию, чтобы повторно использовать ее в других компонентах:
const toBoolean = (value: boolean | string): boolean => {
return value != null && `${value}` !== 'false';
};
@Component({ selector: 'app-test', template: `` })
export class TestComponent {
@Input({ transform: toBoolean }) show: boolean = false;
}Поскольку преобразование строк в логические значения или строк в функции является обычным делом, Angular предоставит для них встроенные функции. Таким образом, мы сможем это сделать:
import { booleanAttribute, numberAttribute } from '@angular/core';
@Component({ selector: 'app-test', template: `` })
export class TestComponent {
@Input({ transform: booleanAttribute }) show: boolean = false;
@Input({ transform: numberAttribute }) count: number = 0;
}И использовать его как:
<app-test show count="1" /> <!-- just setting the attribute -->
<app-test show="true" count="1" /> <!-- static attribute binding -->
<app-test [show]="true" [count]="1" /> <!-- dynamic attribute binding -->Как мы видим, с этой новой функцией все будет намного проще 💎
