Что такое маршрутизируемый компонент входа?
В Angular, маршрутизируемый компонент входа (entry component) — это компонент, который загружается в приложение динамически при помощи Angular Router. В отличие от обычных компонентов, которые могут быть частью шаблона и внедряться в другие компоненты, маршрутизируемые компоненты не объявляются в шаблонах других компонентов.
Когда использовать маршрутизируемые компоненты?
Маршрутизируемые компоненты полезны, когда мы создаем многостраничные приложения с различными представлениями, которые зависят от маршрутов. Например, вы можете использовать маршрутизацию для перехода между страницами блога, страницы профиля пользователя или страницы настроек.
Как создать маршрутизируемый компонент?
Вот пошаговое руководство по созданию маршрутизируемого компонента в Angular.
ng generate component example
Это создаст новый компонент с именем
ExampleComponent.app-routing.module.ts:import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ExampleComponent } from './example/example.component';
const routes: Routes = [
{ path: 'example', component: ExampleComponent },
// другие маршруты
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
routerLink в шаблоне, например:<nav>
<a routerLink="/example">Пример</a>
</nav>
<router-outlet></router-outlet>
Элемент
<router-outlet> будет местом, куда будет подставлен ваш маршрутизируемый компонент, например, ExampleComponent, когда пользователь перейдет по маршруту /example.example.component.ts и добавьте дополнительную логику и шаблон для компонента:import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `<h1>Пример маршрутизируемого компонента!</h1>`
})
export class ExampleComponent { }
ng serve
Перейдите в браузоре по адресу
http://localhost:4200/example, и вы увидите ваш маршрутизируемый компонент.Заключение
Маршрутизируемые компоненты в Angular позволяют разработчикам создавать модульные и легко управляемые приложения, переходя между различными страницами без перезагрузки. Они являются важной частью архитектуры Angular, и умение работать с ними откроет множество возможностей для создания сложных приложений.