От хорошего к великому: параметры входных данных, 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;
}
Эта функция также работает с директивами хоста. Это означает, что если мы используем директиву с помощью hostDirectives
, мы должны предоставить ее обязательные входные данные inputs
.
Возможно, вам будет интересно
Структурные директивы
Observable. Subscribe и Unsubscribe
От хорошего к великому: параметры входных данных, inputs в Angular
inputs
, как обязательных для компонентов и директив. Другими словами, теперь мы можем указать, что компонент или директива требует определенных входных данных inputs для правильной работы.