меню

От хорошего к великому: параметры входных данных, inputs в Angular

В Angular 16.0.0-next.4 была добавлена новая функция - возможность определения входных данных inputs, как обязательных для компонентов и директив. Другими словами, теперь мы можем указать, что компонент или директива требует определенных входных данных inputs для правильной работы.

Используя эту новую функцию, мы можем гарантировать наличие всех необходимых данных до выполнения логики компонента или директивы, что приводит к лучшему качеству кода, меньшему количеству ошибок и более эффективному процессу разработки в целом. Для использования этой функции мы можем установить новый параметр required в нашем входном параметре input.

  
@Component({
  selector: 'app-foo',
  standalone: true,
  templateUrl: './foo.component.html',
})
export class FooComponent {
  @Input({ required: true }) elementId: string;
}
  

Если компонент или директива не инициализирует этот входной параметр, то возникнет ошибка компиляции:

Если компонент или директива не инициализирует этот входной параметр, то возникнет ошибка компиляции

Мы также можем передать псевдоним, используя новый параметр alias.

  
@Component({
  selector: 'app-foo',
  standalone: true,
  templateUrl: './foo.component.html',
})
export class FooComponent {
   @Input({ required: true, alias: 'elementId' }) id: string;
}
  

Мы также можем передать псевдоним, используя новый параметр alias

Эта функция также работает с директивами хоста. Это означает, что если мы используем директиву с помощью hostDirectives, мы должны предоставить ее обязательные входные данные inputs.


Возможно, вам будет интересно

Формы. Шаблонный подход.

Работа с формами. Шаблонный подход (Template-driven)

Директива атрибута

Создание директивы атрибута и использование класса Renderer2 в Angular

Angular & Rxjs: Отписываться или не отписываться?

Вы наверное уже знаете при подписке на обозреваемую последовательность либо просто событие в Javascript вы обычно должны в определенный момент отписываться, чтобы освободить память. Иначе это приведет к утечке памяти.

Формы в Angular

Модели работы с формами в Angular

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту