меню

Angular Routing в Angular 17

Angular Routing представляет собой важную функцию, которая дает возможность разработчикам создавать динамичные и гибкие SPA веб-приложения. Позволяя пользователям без проблем переходить между компонентами, она обеспечивает плавное взаимодействие. В данной статье мы рассмотрим основные принципы маршрутизации в Angular и методы эффективного использования её возможностей.

Настройка маршрутов

1. Импортируем компоненты.

В файле app.routes.ts вы импортируете созданные вами компоненты. Это позволяет вам ссылаться на эти компоненты при работе ваших маршрутов.

	
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';		
		

2. Создаем коллекцию маршрутов.

Создайте массив маршрутов в том же файле app.routes.ts и определите ваши маршруты. Каждый маршрут представляет собой объект JavaScript, содержащий путь (URL) и компонент:

	
export const routes: Routes = [
    { path: 'first-component', component: FirstComponent },
    { path: 'second-component', component: SecondComponent}
];
	

3. Настраиваем приложение.

Добавьте следующую конфигурацию в файл app.config.ts:

	
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};
	

4. Настраиваем навигацию.

В вашем шаблоне приложения (например, app.component.html) добавьте навигационные ссылки для двух компонентов:

	
<h1>Angular Router App
  <nav>
    <ul>
      <li><a routerLink="first-component" routerLinkActive="active">First Component</a></li>
      <li><a routerLink="second-component" routerLinkActive="active">Second Component</a></li>
    </ul>
  </nav>

  <router-outlet></router-outlet>
	

Вам также необходимо добавить RouterLink, RouterLinkActive и RouterOutlet в массив импортов AppComponent.

routerLink также может принимать массив сегментов маршрутов, что позволяет вам переходить к маршрутам с динамическими значениями.

	
<a [routerLink]="['/products', productID]">View Product
	

В данном случае productId - переменная, которая представляет собой конкретный идентификатор продукта, и при клике на ссылку происходит навигация на страницу деталей продукта с соответствующим идентификатором.

Кроме того, вы можете применять навигацию с помощью Router.navigate.

	
constructor(private router: Router) {}

goToItems() {
  this.router.navigate(['/items']);
}
	

Если вашему маршруту требуются параметры, вы можете включить их в массив навигации.

	
goToItemDetails(itemID: number) {
  this.router.navigate(['/items', itemID]);
}
	

Вам также необходимо добавить Router в массив импортов AppComponent.

5. Порядок Маршрутов

Маршрутизатор использует стратегию "первый подошел - победил", поэтому сначала перечислите более конкретные маршруты, за которыми следует маршрут с пустым путем в качестве значения по умолчанию. Маршрут с подстановочным символом должен идти последним.

6. Перенаправления (Redirect).

Реализуйте перенаправления, настроив маршрут с параметрами redirectTo и pathMatch. Например:

	
{ path: '', redirectTo: '/home', pathMatch: 'full' },
	

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

7. Отображение страницы 404.

Если вы хотите отобразить настраиваемую страницу 404, настройте маршрут подстановки с установленным свойством компонента равным PageNotFoundComponent:

	
{ path: '**', component: PageNotFoundComponent },
	

8. Дочерние (вложенные) маршруты.

По мере роста вашего приложения рассмотрите создание дочерних маршрутов относительно компонента. Их называют дочерними маршрутами. Включите второй <router-outlet> в шаблон родительского компонента и определите дочерние маршруты в массиве Routes:

	
const routes: Routes = [
    {
        path: 'parent',
        component: ParentComponent,
        children: [
        { path: 'child1', component: Child1Component },
        { path: 'child2', component: Child2Component },
        // Add more child routes as needed
        ]
    }
];
	

9. Установка заголовков страницы.

Присвоить уникальные заголовки страницам, используя свойство title в конфигурации маршрута. Например:

	
const routes: Routes = [
    {
        path: 'parent',
        title: 'Parent',
        component: ParentComponent,
        children: [
        { path: 'child1', title: 'Child1', component: Child1Component },
        { path: 'child2', title: 'Child2', component: Child2Component },
        // Add more child routes as needed
        ]
    }
];
	

10. Получение информации о маршруте.

Рассмотрим пример, где у нас есть список блог-постов, и мы хотим перейти к подробному просмотру конкретного поста. Подробный просмотр должен получить идентификатор поста из маршрута для отображения корректной информации. Вот как вы можете это реализовать:

В этом примере мы настроили маршруты для перехода с списка блог-постов на страницу с подробностями о конкретном посте. BlogDetailComponent использует свойство @Input postId для получения ID из маршрута, получает детали с использованием BlogService и отображает информацию.

В конфигурации маршрутизации вашего приложения используйте функцию withComponentInputBinding с методом provideRouter. Это позволит передавать информацию от одного компонента к другому через маршрут.

	
import { ApplicationConfig } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';

import { appRoutes } from './app.routes'; 

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(appRoutes, withComponentInputBinding())]
};
	

В вашем компоненте BlogListComponent, когда пользователь нажимает на запись блога для просмотра деталей, перейдите на маршрут blog/:postId:

	
viewBlogDetails(postId: string) {
	this.router.navigate(['/blog', postId]);
}
	

В компоненте, где вы хотите получить информацию, определите свойство @Input(), совпадающее с именем параметра, который вы хотите получить.

	
export class BlogDetailComponent {
  @Input() set postId(postId: string) {
    this.post$ = this.blogService.getBlogPost(postId);
  }

  post$!: Observable<BlogPost | undefined>;

  constructor(private blogService: BlogService) {}
}
	

Исходник приложения можно посмотреть в GitHub: github.com/MaxiDeBox/ng17-angular-routing-example


Возможно, вам будет интересно

10 лучших UI библиотек для Angular

Angular зарекомендовал себя, как один из самых популярных фреймворков JavaScript. Его компонентная архитектура позволяет разработчику разделить приложение на небольшие многократно используемые фрагменты.

JavaScript операторы

JavaScript операторы, которые важно знать для работы с Angular

Структурные директивы

Что такое структурные директивы. Встроенные и собственные структурные директивы.

Route Resolving

Разрешение данных это процесс их получения перед активацией роута. В приложении возможна задержка перед тем, как данные будут предоставлены сервером.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту