Как настроить маршрут для пользовательской страницы 404 в Angular Project - PullRequest
Новая
       26

Как настроить маршрут для пользовательской страницы 404 в Angular Project

4 голосов
/ 16 мая 2019

В моем Angular-проекте у меня есть компонент с именем 'errorRouteComponent' для пользовательской страницы 404. Когда кто-то вошел в не определенный маршрут, он должен показать «неправильный маршрут.component.html». Я не понимаю, как это сделать.

Это «app-rouring.module.ts», который я использовал. 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Required components for which route services to be activated
import { LandingComponent } from '../../components/landing/landing.component';
import { DashboardComponent } from '../../components/dashboard/dashboard.component';
import { UserprofileComponent } from '../../components/userprofile/userprofile.component';
import { WrongRouteComponent } from '../../components/wrong-route/wrong-route.component';

const routes: Routes = [
  { path: '', component: LandingComponent},
  { path: '/dashboard', component: DashboardComponent},
  { path: '/userprofile', component: UserprofileComponent},

  //Wrong route
  { path: '404', component: WrongRouteComponent},

];

Может кто-нибудь сказать мне, какие изменения я должен добавить к 

{ path: '404', component: WrongRouteComponent},

Ответы [ 4 ]

10 голосов
/ 16 мая 2019

Вы можете просто сделать это 

{
    path        : '**',
    pathMatch   : 'full',
    component   : WrongRouteComponent
}

Поместите это, наконец, в свой файл маршрутизации в массиве маршрутов.

Надеюсь, это поможет вам.

4 голосов
/ 16 мая 2019

Пожалуйста, измените путь '404' на **

Итак, маршруты должны быть 

const routes: Routes = [
  { path: '', component: LandingComponent},
  { path: '/dashboard', component: DashboardComponent},
  { path: '/userprofile', component: UserprofileComponent},

  //Wrong route
  { path: '**', component: WrongRouteComponent},

];
3 голосов
/ 16 мая 2019

wild card route перехватит все пути, которые вы не знаете (неопределенные маршруты в вашей константе). Неопределенный URL-адрес заставляет маршрутизатор выдавать ошибку и завершать работу приложения.

Обычно маршруты читаются сверху вниз, поэтому важно сохранить маршрутный символ ('**') в конце списка маршрутов. Если вы сохранили это на вершине, все остальные маршруты будут считаться неопределенными.

Вы можете использовать его, как показано ниже. 

{path: ‘not-found’ , component: ‘NotFoundComponent’}
{path: ‘**’ , redirectTo: ‘/not-found’}

Или 

 { path: '**', component: NotFoundComponent}
0 голосов
/ 24 мая 2019

Это ответ, который работал для меня. 

const routes: Routes = [
  { path: '', component: LandingComponent},
  { path: '/dashboard', component: DashboardComponent},
  { path: '/userprofile', component: UserprofileComponent},

  //Wrong route
  { path: '**', pathMatch   : 'full', component: WrongRouteComponent},

];
...