DevGang
Авторизоваться

Добавьте сверхспособности к вашим входным данным 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 -->

Как мы видим, с этой новой функцией все будет намного проще 💎

Источник:

#Angular
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

В этом месте могла бы быть ваша реклама

Разместить рекламу