В 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;
}
Эта функция также работает с директивами хоста. Это означает, что если мы используем директиву с помощью hostDirectives
, мы должны предоставить ее обязательные входные данные inputs
.
Работа с роутером и ссылками в Angular. Программное переключение роутера и параметры пути в Angular
Реактивные формы — это одна из лучших вещей в Angular. Поскольку они упрощают работу с большими и действительно динамичными формами. В этой мы рассмотрим создание кастомного элемента формы.
Рассмотрим события в Angular. Event Binding. Передача и использование данных с помощью event Binding