Question

在我的Angular项目中，我有一个名为“ wrongRouteComponent”的组件，用于自定义404页面。当有人输入非预定义的路线时，它应该显示“ wrong-route.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},

Answer 1

您可以简单地做到

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

最后将其放入路由数组中的路由文件中。

希望对您有帮助。

Answer 2

请将路径'404'更改为**

因此，路线应为

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

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

];

Answer 3

wild card route将捕获您不知道的所有路径（常量中的未定义路径）。未定义的URL会导致路由器引发错误并使应用程序崩溃。

通常从顶部到底部读取路由，因此将通配符路由（'**'）保留在路由列表的末尾很重要。如果将其放在最前面，则所有其他路由都将被视为未定义。

您可以按以下方式使用它。

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

或

 { path: '**', component: NotFoundComponent}

Answer 4

这是对我有用的答案。

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

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

];

如何在Angular Project中为自定义404页面设置路线

4 个答案: