Начиная с Angular версии 16.1.0, была введена новая полезная функция, предоставляющая альтернативный и простой способ преобразования входных значений, исключающая необходимость использования методов setter
и getter
.
Декоратор @Input
теперь включает параметр transform
, который принимает функцию, которая принимает переданное значение input
и возвращает новое значение. Рассмотрим распространенный пример:
function toNumber(value: string | number) { return isNumber(value) ? value : parseInt(value); } @Component({ selector: 'app-rect', template: ``, standalone: true, }) export class FooComponent { @Input({ transform: toNumber }) width: number; }
В приведенном выше фрагменте кода, когда мы используем FooComponent
и передаем ввод width
в виде строки:
<app-foo width="100" />
Функция преобразования toNumber
будет обрабатывать приведение, преобразуя строковое значение в число.
Еще один сценарий, в котором эта функция пригодится, — это работа с атрибутами HTML. Атрибуты boolean
считаются true
, если они присутствуют на узле DOM, и false
, если они отсутствуют. Однако Angular интерпретирует все статические атрибуты как строки, что приводит к распространенной проблеме. Например, следующий код вернет пустую строку:
@Component({ selector: 'app-checkbox', template: ``, standalone: true, }) export class CheckboxComponent { @Input() disabled: boolean; } <app-checkbox disabled/>
Чтобы решить эту проблему, мы можем использовать параметр transform
вместо использования геттеров и сеттеров. Angular предоставляет утилиты booleanAttribute
и numberAttribute
в @angular/core
, которые обычно используются в большинстве проектов. Вот пример:
import { Input, booleanAttribute } from '@angular/core'; @Component({ selector: 'app-checkbox', template: ``, standalone: true, }) export class CheckboxComponent { @Input({ transform: booleanAttribute }) disabled: boolean = false; }
В приведенном выше коде функция преобразования booleanAttribute
используется для обработки логического приведения. Теперь, когда мы используем CheckboxComponent
и указываем атрибут disabled
:
<app-checkbox disabled />
Функция преобразования будет соответствующим образом интерпретировать наличие атрибута как true
.
Стоит отметить, что Angular уже использует эту функцию внутри маршрутизатора.
В целом, с введением опции transform
в декоратор @Input
Angular упрощает процесс преобразования входных значений, предлагая более рациональный подход по сравнению с традиционными методами установки и получения.
Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular и JS!