меню

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

С постепенным ростом приложения, бойлерплейт-код, введенный Angular, становится громоздким и трудным для поддержки. Команда Angular стремится сделать архитектуру приложения легче, поэтому одной из новых возможностей, которую они представили, являются автономные компоненты.

Динамические шаблоны в Angular

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

Связывание свойств и событий

Создание кастомных событий и их обработчиков. Импорт свойств родительского компонента.

Кастомные элементы форм в Angular

Реактивные формы — это одна из лучших вещей в Angular. Поскольку они упрощают работу с большими и действительно динамичными формами. В этой мы рассмотрим создание кастомного элемента формы.

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

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

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

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

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

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

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