如何在角度路由中设置 404 页面？

在 Angular 应用中，路由是一个非常重要的组成部分，用于实现应用的页面导航功能。当用户访问不存在的页面时，我们需要显示一个 404 页面来告诉用户页面未找到，而不是让用户看到默认的浏览器错误页面。本文将介绍如何在 Angular 应用中设置 404 页面。

创建 404 组件

首先，我们需要创建一个组件来显示 404 页面。在终端中运行以下命令创建一个名为 not-found 的组件：

ng generate component not-found

在 not-found.component.html 文件中，可以编写一个自定义的 404 页面，例如：

<div class="text-center">
  <h1>404 - Page Not Found</h1>
  <p>Sorry, the page you are looking for does not exist.</p>
</div>

配置路由

然后，我们需要在路由配置中添加一个路由规则来处理 404 页面。打开 app-routing.module.ts 文件，并将以下代码添加到路由定义中：

import { NgModule } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  // 其他路由规则...
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

从上面的代码可以看出，我们使用了双星号通配符 ** 来匹配所有不存在的路由，并将其指向 NotFoundComponent 组件。

测试

现在，当用户访问不存在的路由时，应该会看到我们自定义的 404 页面。为了测试这个功能，你可以在浏览器地址栏中输入一个不存在的路由，或者点击应用中的链接来跳转到一个不存在的路由。

结论

通过上面的步骤，你已经成功地在 Angular 应用中设置了自定义的 404 页面。现在，对于不存在的路由，你可以向用户显示一个更友好的提示页面，而不是默认的浏览器错误页面。