Начиная с 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!