Отображение маршрутов с outlet

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

<app-header />
<!-- Angular inserts your route content here -->
<router-outlet />
<app-footer />

import {Component} from '@angular/core';
import {RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}

В этом примере, если в приложении определены следующие маршруты:

import {Routes} from '@angular/router';
import {Home} from './home';
import {Products} from './products';

const routes: Routes = [
  {
    path: '',
    component: Home,
    title: 'Home Page',
  },
  {
    path: 'products',
    component: Products,
    title: 'Our Products',
  },
];

Когда пользователь переходит по адресу /products, Angular отображает следующее:

<app-header />
<app-products />
<app-footer />

Если пользователь возвращается на главную страницу, Angular отображает:

<app-header />
<app-home />
<app-footer />

При отображении маршрута элемент <router-outlet> остается в DOM как точка отсчета для будущих переходов. Angular вставляет содержимое маршрута сразу после элемента outlet, как соседний элемент.

<!-- Contents of the component's template -->
<app-header />
<router-outlet />
<app-footer />

<!-- Content rendered on the page when the user visits /admin -->
<app-header />
<router-outlet />
<app-admin-page />
<app-footer />

Вложение маршрутов с дочерними маршрутами

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

Такие вложенные маршруты называются дочерними. Это означает, что в приложении появляется второй <router-outlet>, поскольку он добавляется к <router-outlet> в AppComponent.

В этом примере компонент Settings будет отображать нужную панель в зависимости от выбора пользователя. Одна из особенностей дочерних маршрутов, которую вы заметите, заключается в том, что у компонента часто есть собственные <nav> и <router-outlet>.

<h1>Settings</h1>
<nav>
  <ul>
    <li><a routerLink="profile">Profile</a></li>
    <li><a routerLink="security">Security</a></li>
  </ul>
</nav>
<router-outlet />

Дочерний маршрут, как и любой другой маршрут, должен иметь path и component. Единственное отличие заключается в том, что дочерние маршруты размещаются в массиве children внутри родительского маршрута.

const routes: Routes = [
  {
    path: 'settings',
    component: Settings, // this is the component with the <router-outlet> in the template
    children: [
      {
        path: 'profile', // child route path
        component: Profile, // child route component that the router renders
      },
      {
        path: 'security',
        component: Security, // another child route component that the router renders
      },
    ],
  },
];

После правильной настройки routes и <router-outlet> приложение начнет использовать вложенные маршруты!

Вторичные маршруты с именованными outlet

На страницах может быть несколько outlet — каждому из них можно присвоить имя, чтобы указать, какое содержимое к какому outlet относится.

<app-header />
<router-outlet />
<router-outlet name="read-more" />
<router-outlet name="additional-actions" />
<app-footer />

У каждого outlet должно быть уникальное имя. Имя нельзя задать или изменить динамически. По умолчанию имя — 'primary'.

Angular сопоставляет имя outlet со свойством outlet, определенным для каждого маршрута:

{
  path: 'user/:id',
  component: UserDetails,
  outlet: 'additional-actions'
}

События жизненного цикла outlet

Outlet маршрутизатора может генерировать четыре события жизненного цикла:

Добавить обработчики событий можно с помощью стандартного синтаксиса привязки событий:

<router-outlet
  (activate)="onActivate($event)"
  (deactivate)="onDeactivate($event)"
  (attach)="onAttach($event)"
  (detach)="onDetach($event)"
/>

Подробнее см. в документации API для RouterOutlet.

Передача контекстных данных компонентам маршрутов

Для передачи контекстных данных компонентам маршрутов часто требуется глобальное состояние или сложная конфигурация маршрутов. Чтобы упростить эту задачу, каждый RouterOutlet поддерживает входной параметр routerOutletData. Компоненты маршрутов и их дочерние компоненты могут считывать эти данные как сигнал с помощью токена внедрения ROUTER_OUTLET_DATA. Это позволяет настраивать отдельные outlet, не изменяя определения маршрутов.

import {Component} from '@angular/core';
import {RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-dashboard',
  imports: [RouterOutlet],
  template: `
    <h2>Dashboard</h2>
    <router-outlet [routerOutletData]="{layout: 'sidebar'}" />
  `,
})
export class Dashboard {}

Компонент маршрута может внедрить предоставленные данные outlet с помощью ROUTER_OUTLET_DATA:

import {Component, inject} from '@angular/core';
import {ROUTER_OUTLET_DATA} from '@angular/router';

@Component({
  selector: 'app-stats',
  template: `<p>Stats view (layout: {{ outletData().layout }})</p>`,
})
export class Stats {
  outletData = inject(ROUTER_OUTLET_DATA) as Signal<{layout: string}>;
}

Когда Angular активирует Stats в этом outlet, компонент получает { layout: 'sidebar' } в качестве внедренных данных.

Следующие шаги

Узнайте, как переходить к маршрутам с помощью Angular Router.