Angular13 Angular 教程：创建自定义路由匹配器

2024-02-25 开发教程 Angular13 匿名 5℃

教程：创建自定义路由匹配器

Angular Router 支持强大的匹配策略，你可以使用它来帮助用户在应用中导航。该匹配策略支持静态路由、带参数的可变路由、通配符路由等。此外，还可以为更复杂的 URL 构建你自己的自定义模式匹配。

在本教程中，你将使用 Angular 的 UrlMatcher 来构建自定义路由匹配器。此匹配器在 URL 中查找 Twitter ID。

有关本教程最终版本的工作示例，请参阅现场演练/ 下载范例。

目标

实现 Angular 的 UrlMatcher 以创建自定义路由匹配器。

创建一个范例应用

使用 Angular CLI，创建一个新应用程序 angular-custom-route-match。除了默认的 Angular 应用程序框架之外，还将创建一个 profile 组件。

创建一个新的 Angular 项目 angular-custom-route-match。

ng new angular-custom-route-match

当提示 Would you like to add Angular routing? 时，选择 Y。

当系统提示 Which stylesheet format would you like to use? 时，选择 CSS。

片刻之后，一个新项目 angular-custom-route-match 就准备好了。

打开终端窗口，进到 angular-custom-route-match 目录。创建一个组件 profile。

ng generate component profile

在你的代码编辑器中，找到文件 profile.component.html 并将其占位内容替换为以下 HTML。

<p>
Hello {{ username$ | async }}!
</p>

在你的代码编辑器中，找到文件 app.component.html 并将其占位内容替换为以下 HTML。

<h2>Routing with Custom Matching</h2>
Navigate to <a routerLink="/@Angular">my profile</a>
<router-outlet></router-outlet>

为你的应用程序配置路由

应用程序框架就绪后，接下来就要向 app.module.ts 文件中添加路由能力。首先，你要创建一个自定义 URL 匹配器，用于在 URL 中查找 Twitter ID。此 ID 由其前导 @ 符号标识出来。

在你的代码编辑器中，打开 app.module.ts 文件。
为 Angular 的 RouterModule 和 UrlMatcher 添加 import 语句。

import { RouterModule, UrlSegment } from '@angular/router';

在 imports 数组中，添加 RouterModule.forRoot([]) 语句。

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
/* . . . */
    ])],
  declarations: [ AppComponent, ProfileComponent ],
  bootstrap:    [ AppComponent ]
})

将如下代码添加到 RouterModule.forRoot() 语句中，以便使用自定义路由匹配器。

matcher: (url) => {
    if (url.length === 1 && url[0].path.match(/^@[\w]+$/gm)) {
      return {
        consumed: url,
        posParams: {
          username: new UrlSegment(url[0].path.slice(1), {})
        }
      };
    }
    return null;
  },
  component: ProfileComponent
}

这个自定义匹配器是一个执行以下任务的函数：

匹配器验证数组是否只包含一个区段。
匹配器使用正则表达式来确保用户名的格式是匹配的。
如果匹配，则该函数返回整个 URL，将路由参数 username 定义为路径的子字符串。
如果不匹配，则该函数返回 null 并且路由器继续查找与 URL 匹配的其他路由。

自定义 URL 匹配器的行为与任何其他路由定义方式是一样的。请像定义任何其他路由一样定义子路由或惰性加载路由。

订阅路由参数

自定义匹配器就位后，你现在需要订阅 profile 组件中的路由参数。

在你的代码编辑器中，打开 profile.component.ts 文件。
为 Angular 的 ActivatedRoute 和 ParamMap 添加 import 语句。

import { ActivatedRoute, ParamMap } from '@angular/router';

为 RxJS 的 map 添加 import 语句。

import { map } from 'rxjs/operators';

订阅 username 路由参数。

username$ = this.route.paramMap
  .pipe(
    map((params: ParamMap) => params.get('username'))
  );

将 ActivatedRoute 注入到组件的构造函数中。

constructor(private route: ActivatedRoute) { }

测试你的自定义 URL 匹配器

代码就绪后，就可以测试自定义 URL 匹配器了。

在终端窗口中，运行 ng serve 命令。

ng serve

打开浏览器访问 http://localhost:4200。

你会看到一个网页，其中包含一个句子，内容为 Navigate to my profile。

单击 my profile 超链接。

一个新的句子 Hello, Angular! 出现在页面上。

上一节： Angular 教程：在单页面应用中导航

下一节： Angular 教程：为英雄之旅添加路由支持

"Angular13"的目录