меню

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

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

Инструкция по деплою Angular приложения на Github Pages

В данной инструкции мы разберём, как можно задеплоить Angular приложение на Github Pages на примере нового приложения.

Установка и первый запуск Angular

Angular применяется для создания одностраничных приложений - SPA (Single Page Applications). Angular создает рендер программы, в отличие от подхода, когда весь контент загружен в DOM, а JavaScript его меняет.

Появление нового функционала в Angular 16 и Angular 17

Angular предоставляет новые возможности для замены директив ngFor и ngIf. Все, что вам нужно сделать, это заиспользовать @for и @if, как вы используете директивы ngFor и ngIf, но с немного другим синтаксисом.

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

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

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

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

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

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

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