在Angular中，自定义路由匹配器是一个强大的工具，允许你根据特定的逻辑来确定是否应该激活某个路由。这可以用于实现更高级的路由控制和导航。

以下是一个简单的教程，演示如何创建一个自定义的路由匹配器。

步骤 1: 创建路由匹配器服务

首先，创建一个服务来处理自定义的路由匹配逻辑。例如，我们将创建一个名为 CustomRouteMatcherService 的服务：
ng generate service custom-route-matcher

打开 src/app/custom-route-matcher.service.ts 文件，实现一个简单的匹配逻辑。在这个例子中，我们假设只有偶数的路由参数才能匹配成功：
// custom-route-matcher.service.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CustomRouteMatcherService {

  constructor() { }

  match(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    const segments: UrlSegment[] = route.url;

    // Custom matching logic (for example, check if the last segment is an even number)
    if (segments.length > 0 && parseInt(segments[segments.length - 1].path) % 2 === 0) {
      return true; // Match succeeded
    } else {
      console.log(`Route ${state.url} did not match the custom criteria.`);
      return false; // Match failed
    }
  }
}

步骤 2: 注册自定义匹配器服务

将自定义的路由匹配器服务注册到应用的路由模块中。打开 src/app/app-routing.module.ts 文件，并进行相应的修改：
// app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { CustomRouteMatcherService } from './custom-route-matcher.service';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'custom/:id', component: CustomComponent, canActivate: [CustomRouteMatcherService] },
  { path: '**', redirectTo: '/home', pathMatch: 'full' }, // Default route
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [CustomRouteMatcherService] // Register the custom route matcher service
})
export class AppRoutingModule {}

步骤 3: 使用自定义匹配器

在需要使用自定义匹配器的组件中，你可以使用 CanActivate 守卫。例如，创建一个名为 CustomComponent 的组件，并在该组件中添加自定义匹配器的逻辑：
// custom.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-custom',
  template: `
    <div>
      <h2>Custom Component</h2>
      <p>This component is displayed only if the route parameter is an even number.</p>
    </div>
  `,
})
export class CustomComponent {}

步骤 4: 运行应用

最后，运行你的应用：
ng serve

访问 http://localhost:4200/custom/2，你应该能够看到 Custom Component 被成功激活，因为参数2是一个偶数。如果访问 http://localhost:4200/custom/3，则匹配失败，控制台将显示相应的日志。

这个例子演示了如何创建自定义的路由匹配器服务，并在路由配置中使用它。你可以根据实际需求，编写更复杂的匹配逻辑，以满足你的应用程序的特定需求。


转载请注明出处：http://www.pingtaimeng.com/article/detail/4939/Angular