В приложении angular на основе маршрутизации мы создаем разные маршруты, на которые нужно направлять, и для этого мы создаем разные компоненты. Если вы новичок в маршрутизации, обратитесь к моей предыдущей статье о том, как создавать базовые маршруты в Angular здесь.
Чтобы начать понимать, что такое маршруты с подстановочными знаками, давайте сначала предположим, что мы уже создали два маршрута в нашем приложении angular. Это Первый компонент и Второй компонент.
Внутри app-routing.module.ts у нас есть:
{path: ‘first’, component: ‘FirstComponent’},
{путь: «второй», компонент: «Второй компонент»}
А код в компонентах выглядит так:
Теперь, когда у нас есть два компонента, готовых к маршрутизации, давайте попробуем понять концепцию маршрутов WildCard.
Если запрошенный URL-адрес маршрута не относится к тому, что упоминается в коде, мы получаем ошибку в консоли. Например, в моем приложении есть два компонента:
localhost: 4200 / first и localhost: 4200 / second.
Теперь, если я попытаюсь запросить localhost: 4200 / test, Angular выдаст в консоли такую ошибку:
Это потому, что внутри нашего приложения нет такого компонента, как TestComponent. Поэтому, чтобы избежать этой ошибки и вместо этого сообщить пользователю, что маршрут не существует, мы используем WILDCARD ROUTES.
Для этого мы создаем новый компонент Page-Not-Found и перенаправляем пользователя на этот компонент всякий раз, когда возникает неизвестный запрос маршрута. При работе с маршрутами очень важен порядок маршрутов.
Поскольку маршрут с подстановочными знаками совпадает со всеми остальными маршрутами, его нужно упомянуть в последнем. Это сделано для того, чтобы быть уверенным, что если ни один другой маршрут не найден, то только компонент PageNotFound должен быть перенаправлен на.
Создайте новый компонент с помощью,
ng g c PageNotFoundComponent
А теперь укажите его внутри константных маршрутов,
Теперь, когда мы заходим в браузер, он отображает страницу, которая не найдена. это потому, что localhost: 4200 - неизвестный маршрут, потому что мы его не определили. Для этого мы создаем еще один запрос маршрута в app-routing.module.ts следующим образом:
Это дает нам первую страницу по умолчанию как FirstComponent.
Другой способ сделать это - вместо указания компонента мы указываем путь. Сделать это,
{путь: ‘‘, redirectTo: ‘/ first’, pathMatch: ‘prefix’}
Другое возможное значение pathMatch - «full», что в основном означает, что если полный URL-адрес пуст, выполняется перенаправление на / first, что является FirstComponent.
Наконец, когда мы переходим на localhost: 4200 / test, мы получаем следующее:
