Создание пользовательских сопоставителей маршрутов

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

В этом руководстве вы создадите пользовательский сопоставитель маршрутов с помощью UrlMatcher Angular. Этот сопоставитель ищет в URL-адресе имя пользователя в Twitter.

Цели

Реализуйте UrlMatcher Angular, чтобы создать пользовательский сопоставитель маршрутов.

Создание примера приложения

С помощью Angular CLI создайте новое приложение angular-custom-route-match. Помимо стандартной платформы приложения Angular, вы также создадите компонент profile.

1. Создайте новый проект Angular angular-custom-route-match.

   ng new angular-custom-route-match

   Когда появится запрос Would you like to add Angular routing?, выберите Y.

   Когда появится запрос Which stylesheet format would you like to use?, выберите CSS.

   Через несколько мгновений новый проект angular-custom-route-match будет готов.

2. В терминале перейдите в каталог angular-custom-route-match.

3. Создайте компонент profile.

   ng generate component profile

4. В редакторе кода найдите файл profile.html и замените содержимое-заполнитель следующим HTML-кодом.

   <p>Hello {{ username() }}!</p>
   

5. В редакторе кода найдите файл app.html и замените содержимое-заполнитель следующим HTML-кодом.

   <h2>Routing with Custom Matching</h2>
   
   Navigate to <a routerLink="/@Angular">my profile</a>
   
   <router-outlet />
   

Настройка маршрутов приложения

После подготовки платформы приложения необходимо добавить возможности маршрутизации в файл app.config.ts. В рамках этого процесса вы создадите пользовательский сопоставитель URL-адресов, который ищет в URL-адресе имя пользователя в Twitter. Это имя определяется предшествующим ему символом @.

1. Откройте в редакторе кода файл app.config.ts.

2. Добавьте оператор import для provideRouter Angular и withComponentInputBinding, а также для маршрутов приложения.

   import {provideRouter, withComponentInputBinding} from '@angular/router';
   
   import {routes} from './app.routes';

3. Добавьте оператор provideRouter(routes, withComponentInputBinding()) в массив поставщиков.

4. Определите пользовательский сопоставитель маршрутов, добавив следующий код в маршруты приложения.

   {
       matcher: (url) => {
         if (url.length === 1 && url[0].path.match(/^@[\w]+$/gm)) {
           return {consumed: url, posParams: {username: new UrlSegment(url[0].path.slice(1), {})}};
         }
   
         return null;
       },
       component: Profile,
     },

Этот пользовательский сопоставитель — функция, выполняющая следующие действия:

• Сопоставитель проверяет, что массив содержит только один сегмент
• Сопоставитель использует регулярное выражение, чтобы проверить соответствие имени пользователя заданному формату
• При совпадении функция возвращает весь URL-адрес, определяя параметр маршрута username как подстроку пути
• Если совпадения нет, функция возвращает null, и маршрутизатор продолжает искать другие маршруты, соответствующие URL-адресу

Чтение параметров маршрута

Теперь, когда пользовательский сопоставитель настроен, можно связать параметр маршрута с компонентом profile.

Откройте в редакторе кода файл profile.ts и создайте input, соответствующий параметру username. Ранее в provideRouter мы добавили возможность withComponentInputBinding. Она позволяет Router привязывать данные непосредственно к компонентам маршрутов.

username = input.required<string>();

Проверка пользовательского сопоставителя URL-адресов

Когда код готов, можно проверить пользовательский сопоставитель URL-адресов.

1. В окне терминала выполните команду ng serve.

   ng serve

2. Откройте в браузере адрес http://localhost:4200.

   Вы должны увидеть одну веб-страницу с предложением Navigate to my profile.

3. Нажмите ссылку мой профиль.

   На странице появится новое предложение: Hello, Angular!.

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

Сопоставление шаблонов с помощью Angular Router обеспечивает большую гибкость при работе с динамическими URL-адресами в приложении. Дополнительные сведения об Angular Router см. в следующих материалах: