时间戳

首页 > 解决方案 > 如何在 Angular 项目中为自定义 404 页面设置路由

angular - 如何在 Angular 项目中为自定义 404 页面设置路由

问题描述

在我的 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},

标签： angulartypescriptangular-router

解决方案

你可以简单地做到

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

最后将此通配符路由放入路由文件中的路由数组中。

我希望它对你有帮助。

推荐阅读