Другие распространённые задачи маршрутизации

В этом руководстве рассматриваются некоторые другие распространённые задачи, связанные с использованием маршрутизатора Angular в приложении.

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

Часто при переходе пользователя по приложению возникает необходимость передавать информацию от одного компонента другому. Например, рассмотрим приложение, в котором отображается список продуктов для покупок. У каждого элемента списка есть уникальный id. Чтобы изменить элемент, пользователи нажимают кнопку «Изменить», которая открывает компонент EditGroceryItem. Нужно, чтобы этот компонент получил id продукта и мог показать пользователю нужную информацию.

Используйте маршрут, чтобы передавать такую информацию компонентам приложения. Для этого используйте функцию withComponentInputBinding с помощью provideRouter или параметр bindToComponentInputs функции RouterModule.forRoot.

Чтобы получить информацию из маршрута:

1. Добавьте withComponentInputBinding

   Добавьте функцию withComponentInputBinding в метод provideRouter.

   providers: [provideRouter(appRoutes, withComponentInputBinding())];

2. Добавьте входной параметр в компонент

   Измените компонент, добавив свойство input(), имя которого совпадает с именем параметра.

   id = input.required<string>();
   hero = computed(() => this.service.getHero(id()));

3. Необязательно: используйте значение по умолчанию

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

   Значение по умолчанию можно задать с помощью параметра transform входного параметра или управлять локальным состоянием с помощью linkedSignal.

   id = input.required({
     transform: (maybeUndefined: string | undefined) => maybeUndefined ?? '0',
   });
   // or
   id = input<string | undefined>();
   internalId = linkedSignal(() => this.id() ?? getDefaultId());

Отключение привязки параметров запроса

Используйте ComponentInputBindingOptions, чтобы отключить привязку параметров запроса, если вы управляете ими отдельно:

provideRouter(appRoutes, withComponentInputBinding({queryParams: false}));

Настройка поведения для входных параметров, отсутствующих в данных маршрутизатора

По умолчанию при навигации маршрутизатор задаёт для входного параметра значение undefined, если этот параметр отсутствовал в данных маршрутизатора. Это гарантирует, что устаревшие данные не сохранятся.

Если вы хотите не задавать undefined для входных параметров, которые никогда не присутствовали в данных маршрутизатора для активного экземпляра компонента, задайте для параметра unmatchedInputBehavior значение 'undefinedIfStale':

provideRouter(appRoutes, withComponentInputBinding({unmatchedInputBehavior: 'undefinedIfStale'}));

При сочетании unmatchedInputBehavior: 'undefinedIfStale' с queryParams: false входные параметры сохраняют исходные значения, если только маршрутизатор явно не задаёт для них значения. Исключение составляют матричные параметры: если матричный параметр задан при одной навигации, а при следующей удалён, маршрутизатор задаст для входного параметра значение undefined, чтобы не сохранять устаревшие данные.

provideRouter(
  appRoutes,
  withComponentInputBinding({
    queryParams: false,
    unmatchedInputBehavior: 'undefinedIfStale',
  }),
);

Наследование данных родительского маршрута

По умолчанию дочерние маршруты наследуют параметры и данные родительских маршрутов (эквивалентно paramsInheritanceStrategy: 'always'). Это позволяет напрямую обращаться к информации родительского маршрута из дочерних компонентов.

Чтобы восстановить прежнее поведение, при котором параметры наследовались только от маршрутов с пустым путём, задайте для paramsInheritanceStrategy значение 'emptyOnly':

provideRouter(routes, withRouterConfig({paramsInheritanceStrategy: 'emptyOnly'}));

Дополнительные сведения о других доступных настройках см. в разделе Параметры конфигурации маршрутизатора.

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

Чтобы отобразить страницу 404, настройте маршрут-шаблон, задав для свойства component компонент, который будет использоваться для страницы 404:

const routes: Routes = [
  {path: 'first-component', component: First},
  {path: 'second-component', component: Second},
  {path: '**', component: PageNotFound}, // Wildcard route for a 404 page
];

Последний маршрут со значением ** для свойства path является маршрутом-шаблоном. Маршрутизатор выбирает этот маршрут, если запрошенный URL не совпадает ни с одним из путей в списке выше, и перенаправляет пользователя на PageNotFound.

Массив параметров ссылки

Массив параметров ссылки содержит следующие данные для навигации маршрутизатора:

• Путь маршрута к целевому компоненту
• Обязательные и необязательные параметры маршрута, которые включаются в URL маршрута

Привяжите директиву RouterLink к такому массиву:

<a [routerLink]="['/heroes']">Heroes</a>

При указании параметра маршрута используется массив из двух элементов:

<a [routerLink]="['/hero', hero.id]">
  <span class="badge">{{ hero.id }}</span
  >{{ hero.name }}
</a>

Передавайте необязательные параметры маршрута в объекте, как в { foo: 'foo' }:

<a [routerLink]="['/crisis-center', {foo: 'foo'}]">Crisis Center</a>

Этот синтаксис передаёт матричные параметры — необязательные параметры, связанные с определённым сегментом URL. Подробнее см. в разделе Матричные параметры.

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

Следующий минимальный пример RouterLink основан на указанном дочернем маршруте по умолчанию для центра кризисного реагирования.

<a [routerLink]="['/crisis-center']">Crisis Center</a>

Обратите внимание на следующее:

• Первый элемент массива указывает родительский маршрут (/crisis-center)
• У этого родительского маршрута нет параметров
• Для дочернего маршрута не задан маршрут по умолчанию, поэтому его нужно выбрать
• Вы переходите к CrisisList, путь маршрута которого — /, но добавлять косую черту явно не нужно

Рассмотрим следующую ссылку маршрутизатора, которая ведёт от корня приложения к Драконьему кризису:

<a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>

• Первый элемент массива указывает родительский маршрут (/crisis-center)
• У этого родительского маршрута нет параметров
• Второй элемент указывает данные дочернего маршрута, соответствующие определённому кризису (/:id)
• Для дочернего маршрута подробностей требуется параметр маршрута id
• Вы добавили id Драконьего кризиса вторым элементом массива (1)
• В результате получается путь /crisis-center/1

Можно также переопределить шаблон App, оставив в нём только маршруты центра кризисного реагирования:

@Component({
  template: `
    <h1 class="title">Angular Router</h1>
    <nav>
      <a [routerLink]="['/crisis-center']">Crisis Center</a>
      <a [routerLink]="['/crisis-center/1', {foo: 'foo'}]">Dragon Crisis</a>
      <a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
    </nav>
    <router-outlet />
  `,
})
export class App {}

Подводя итог, можно создавать приложения с одним, двумя и более уровнями маршрутизации. Массив параметров ссылки достаточно гибок, чтобы описывать любую глубину маршрутизации и любую допустимую последовательность путей маршрутов, (обязательных) параметров маршрутизатора и (необязательных) объектов параметров маршрута.

LocationStrategy и форматы URL в браузере

При переходе маршрутизатора к новому представлению компонента он обновляет адрес и историю браузера, указывая URL этого представления.

Современные браузеры с поддержкой HTML5 поддерживают history.pushState — метод, который изменяет адрес и историю браузера, не вызывая запрос страницы к серверу. Маршрутизатор может составить «естественный» URL, неотличимый от URL, для которого в противном случае потребовалась бы загрузка страницы.

Вот URL центра кризисного реагирования в формате «HTML5 pushState»:

localhost:3002/crisis-center

Старые браузеры отправляют запросы страниц на сервер при изменении URL адреса, если только изменение не происходит после символа «#» (называемого «хешем»). Маршрутизаторы могут использовать это исключение, добавляя хеши в URL маршрутов внутри приложения. Вот URL с хешем, ведущий в центр кризисного реагирования.

localhost:3002/src/#/crisis-center

Маршрутизатор поддерживает оба формата с помощью двух провайдеров LocationStrategy:

Функция RouterModule.forRoot() задаёт для LocationStrategy значение PathLocationStrategy, которая используется по умолчанию. Во время процесса начальной загрузки можно также переключиться на HashLocationStrategy, переопределив это значение.