В Angular маршрутизация (routing) — это механизм, который позволяет пользователю перемещаться между различными компонентами и страницами вашего приложения. Это особенно полезно для одностраничных приложений (SPA), где вы хотите менять контент без перезагрузки всей страницы.

Основы маршрутизации

Чтобы начать работать с маршрутизацией в Angular, необходимо выполнить несколько шагов:

Установите Angular Router: Если вы создаете новое приложение с помощью Angular CLI, Angular Router будет установлен автоматически. Если вы добавляете маршрутизацию в существующее приложение, вам нужно будет установить его отдельно, если он еще не установлен.

ng add @angular/router

Создание маршрутов: Маршруты определяются в файле маршрутизации (обычно это app-routing.module.ts). Вот пример, как это сделать:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // маршрут по умолчанию
  { path: 'about', component: AboutComponent }, // маршрут к странице "О нас"
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Импортируйте AppRoutingModule в ваше основное приложение: Вам нужно импортировать AppRoutingModule в app.module.ts, чтобы маршруты были доступны в вашем приложении.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Навигация: Для перемещения по маршрутам используйте директиву routerLink. Например, чтобы создать ссылки для навигации на главную страницу и страницу "О нас", вы можете сделать следующее:

<nav>
  <a routerLink="/">Главная</a>
  <a routerLink="/about">О нас</a>
</nav>
<router-outlet></router-outlet>

В этом примере <router-outlet> является местом, куда будут загружаться компоненты, связанные с текущим маршрутом.

Вложенные маршруты

Вы также можете создавать вложенные маршруты, чтобы улучшить структуру вашего приложения. Например, если у вас есть компонент продукта с подстраницами для отзывов и деталей, вы можете сделать следующее:

const routes: Routes = [
  { 
    path: 'products', 
    component: ProductsComponent,
    children: [
      { path: 'reviews', component: ProductReviewsComponent },
      { path: 'details', component: ProductDetailsComponent }
    ]
  }
];

Заключение

Маршрутизация в Angular позволяет вам создавать богато функциональные одностраничные приложения, управляя навигацией между компонентами. Следуя вышеперечисленным шагам, вы сможете настроить маршруты в своем приложении и легко перемещаться между страницами. Не забудьте ознакомиться с документацией Angular по маршрутизации для более детальной информации и возможностей.

Предыдущий вопрос

Что такое декларативные элементы в Angular?

Следующий вопрос

Как определить типы для пользовательских элементов?

Содержание:

Основы маршрутизации

Вложенные маршруты

Заключение

Редактировать