меню

От хорошего к великому: параметры входных данных, 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.


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

Angular Interceptor - перехватчик ошибок http

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

Маршрутизация Angular подробное руководство

Маршрутизация Angular подробное руководство. Без маршрутизации (роутинга) вы никогда не сделаете качественное приложение.

TypeScript, Bootstrap, Main.ts

TypeScript - это суперсет, расширяющий возможности JavaScript наличием типов, классов, интерфейсов и т.д. Браузер не умеет выполнять TypeScript файлы, по этому их нужно компилировать в JS.

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

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

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

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

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

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

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

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

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