Автономные компоненты Angular
Angular уже некоторое время (начиная с Angular 14) позволяет объявлять и использовать так называемые автономные компоненты. Это компоненты, не зависящие от модуля, и поэтому их можно использовать без необходимости объявлять в каком-либо модуле.
Как создать автономный компонент?
Создавать автономные компоненты в принципе очень просто. Достаточно установить флаг standalone в декораторе компонента в true. Но теперь, когда компонент больше не встроен в модуль, вам также придется импортировать все сервисы и другие используемые компоненты:
@Component({
standalone: true,
selector: 'app-my-component',
imports: [
RouterOutlet,
ReminderComponent
],
templateUrl: './app.my-component.html',
styleUrls: ['./app.my-component.css']
})
export class AppComponent {
}Объявление imports определяет, какие другие компоненты может использовать данный компонент. Это могут быть как другие Ng-модули, так и другие самостоятельные компоненты.
Автономный компонент уже имеет всю информацию, чтобы действовать как независимая единица. Он не зависит от модуля и не должен быть объявлен в модуле. Вы можете представить себе автономный компонент как модуль и компонент, объединенные в одно целое.
Bootstrap Angular с помощью автономного компонента
До появления автономных компонентов вы должны были указать стартовый модуль в main.ts, который, в свою очередь, должен был объявить стартовый компонент. Обычно это были AppModule и AppComponent, если вы создавали проект с ng.
С появлением автономных компонентов приложение теперь может быть загружено с помощью автономного компонента. Для этого существует новый метод: boostrapApplication. Первым аргументом этой команды является стартовый компонент, в качестве второго аргумента вы можете указать провайдеров сервисов, используемых в приложении, которые ранее регистрировались в AppModule.
// main.ts
import...
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(HttpClientModule),
provideRouter(APP_ROUTES),
provideAnimations()
]
});Это означает, что центральный AppModule больше не нужен для Angular-приложения. Как вы также можете видеть здесь, вы можете импортировать провайдеры существующих ng-модулей с помощью команды importProvidersFrom.
Это означает, что модульный и автономный подходы могут сосуществовать. Таким образом, вам не придется принимать решение о выборе подхода в одночасье, а совместимость с существующим кодом модулей по-прежнему гарантирована.
Благодарю за прочтение!
