Изменяют ли автономные компоненты способ написания кода в Angular?
С постепенным ростом приложения, бойлерплейт-код, введенный Angular, становится громоздким и трудным для поддержки. Команда Angular стремится сделать архитектуру приложения легче, поэтому одной из новых возможностей, которую они представили, являются автономные компоненты.
Что такое автономные компоненты в Angular?
Автономные компоненты позволяют разработчикам создавать веб-приложения без необходимости использования NgModule. Они были впервые представлены в версии 14, но только в режиме предварительного просмотра для разработчиков. Начиная с версии 15, автономные API являются частью стабильного API. Их можно полностью использовать с Angular Elements, Router, HttpClient и многими другими.
Кроме компонентов, мы также можем создавать автономные директивы и пайпы.
Создание автономного компонента.
В версии 15 Angular CLI представил команду для легкого создания новых автономных компонентов через:
ng g componentName --standalone
Они должны быть помечены как standalone: true и не должны быть частью какого-либо ngModule. Если вы попробуете добавить автономный компонент в модуль, Angular выдаст ошибку.
Любые зависимости, необходимые для компонента, могут быть объявлены непосредственно в массиве imports.
@Component({
standalone: true,
selector: 'app-card',
imports: [ImageComponent, LayoutComponent],
templateUrl: './card.component.html',
styleUrls: ['./card.component.css']
})
export class CardComponent {
...
}
Любой существующий компонент может быть преобразован в автономный. При этом следует учитывать всего лишь три момента:
- Добавить standalone: true.
- Удалить компонент из массива объявлений модуля, в котором он использовался.
- Использовать массив imports для добавления всех необходимых зависимостей.
Использование автономного компонента.
Автономный компонент, пайп или директива может использоваться внутри другого автономного компонента или внутри модуля. В обоих случаях вы должны добавить его в раздел imports так же, как и обычный NgModule.
@NgModule({
declarations: [CardComponent],
exports: [CardComponent],
imports: [ImageComponent],
})
export class CardsLayoutComponent {
...
}
Загрузка автономного компонента.
С версии 14 вы можете загрузить всё приложение, используя автономный компонент в качестве корневого компонента приложения. Для этого можно использовать функцию bootstrapApplication в файле main.ts.
import {bootstrapApplication} from '@angular/platform-browser';
import {CardComponent} from './card.component';
bootstrapApplication(CardComponent, {
providers: []
});
Затем в файле index.html вы должны заменить app-root на селектор вашего автономного компонента.
<body>
<app-card></app-card>
</body>
Настройка инъекции зависимостей (Dependency Injection).
При загрузке вашего приложения с помощью автономного компонента вы можете внедрять сервисы, передавая их в массив providers функции bootstrapApplication:
...
bootstrapApplication(AppComponent,{
providers: [
{provide: API_URL, useValue: 'standalonecomponents.com/api'},
{provide: AuthService, useClass: AuthService},
importProvidersFrom(RouterModule.forRoot(routes))]
});
...
Маршрутизация с использованием автономного компонента.
Для создания маршрутов вам нужно создать файл, который будет отвечать за это, и добавить компонент так же, как это делалось ранее.
import { CardComponent } from "./card.component";
export const routes: Routes = [
{
path: 'card',
component: CardComponent
}
];
После создания маршрутов вы должны загрузить приложение с помощью автономного компонента и импортировать маршруты в массив providers.
import { RouterModule } from '@angular/router';
import { importProvidersFrom, inject, enableProdMode } from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';
import { routes } from './routing';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent,{
providers: [
importProvidersFrom(RouterModule.forRoot(routes))]
});
Ленивая загрузка автономного компонента.
Автономные компоненты могут быть лениво загружены с легкостью. Это можно достичь с помощью использования loadComponent:
export const routes: Route[] = [
{
path: 'card',
loadComponent: () =>
import('./card.component')
.then(m => m.CardComponent)},
];
Если у вас есть случай, когда вы хотите загрузить сразу несколько маршрутов. Например, у вас есть конечные точки GET, POST и DELETE для компонента карточки, вы можете использовать функцию loadChildren вместо loadComponent.
export const routes: Route[] = [
{
path: 'card',
loadComponent: () =>
import('./card/card.routes')
.then(m => m.cardRoutes)},
];
Подводя итог, автономные компоненты являются удобными и простыми в использовании. Они могут упростить способ написания компонентов, сократить избыточный код и помочь новичкам лучше освоить Angular путем устранения концепции NgModule.
Возможно, вам будет интересно
15 Angular директив на каждый день
Route. Обновление шаблона
Angular Routing в Angular 17
Angular Interceptor - перехватчик ошибок http
