Дочерние маршруты

В Angular маршрутизация представляет собой ключевую часть для создания многостраничных приложений. Система маршрутизации позволяет легко управлять переходами между различными представлениями (страницами) приложения. Одной из полезных возможностей является работа с дочерними маршрутами (child routes), которые позволяют создавать вложенные навигационные структуры и разделять логику маршрутов по иерархии.

Структура маршрутов и дочерние маршруты

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

Определение дочерних маршрутов

Чтобы определить дочерние маршруты, необходимо добавить объект маршрута в массив маршрутов родительского маршрута. Каждый маршрут имеет путь (path) и компонент (component), который должен быть отображён при активации маршрута. Для того чтобы маршруты отображались внутри родительского компонента, нужно использовать router-outlet.

Пример конфигурации маршрутов с дочерними маршрутами:

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child1',
        component: Child1Component
      },
      {
        path: 'child2',
        component: Child2Component
      }
    ]
  }
];

В данном примере маршрут с путем parent является родительским и имеет два дочерних маршрута child1 и child2, которые отображаются внутри родительского компонента через <router-outlet>.

Использование <router-outlet>

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

<!-- parent.component.html -->
<h1>Родительский компонент</h1>
<router-outlet></router-outlet>

Когда в маршрутной конфигурации будет активирован дочерний маршрут, Angular отрендерит соответствующий компонент в <router-outlet>. Это позволяет разделить представления и компоненты по уровням.

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

Одним из мощных инструментов, который предоставляет система маршрутизации Angular, является возможность передачи параметров через маршруты, в том числе и для дочерних маршрутов. Параметры могут быть переданы как в URL, так и через параметры запроса.

Параметры в дочерних маршрутах

Если родительский маршрут имеет параметры, они могут быть использованы в дочерних маршрутах. Например, если родительский маршрут имеет параметр id, дочерний маршрут может получить его из URL:

const routes: Routes = [
  {
    path: 'parent/:id',
    component: ParentComponent,
    children: [
      {
        path: 'child1',
        component: Child1Component
      },
      {
        path: 'child2',
        component: Child2Component
      }
    ]
  }
];

Теперь путь может быть таким: /parent/1/child1, где 1 — это параметр, который можно использовать внутри компонента родителя или дочерних компонентов.

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

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-child1',
  templateUrl: './child1.component.html'
})
export class Child1Component {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.parent?.params.subscribe(params => {
      console.log('ID родительского маршрута:', params['id']);
    });
  }
}

Параметры запроса

Помимо параметров пути, в маршрутах могут быть параметры запроса, которые передаются через строку запроса в URL. Эти параметры можно извлечь с помощью свойства queryParams в ActivatedRoute.

Пример:

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
];

URL может выглядеть так: /parent?filter=active, и дочерний компонент может получить параметр filter следующим образом:

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      console.log('Фильтр:', params['filter']);
    });
  }
}

Стратегия активации дочерних маршрутов

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

Активация дочерних маршрутов в зависимости от состояния родителя

Можно настроить маршруты таким образом, чтобы дочерние маршруты активировались только при определённых условиях. Например, можно использовать lazy loading (ленивая загрузка) для компонентов, чтобы они загружались только при необходимости.

Пример ленивой загрузки:

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        loadChildren: () => import('./child/child.module').then(m => m.ChildModule)
      }
    ]
  }
];

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

Заключение

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

Оглавление