Angular路由如何配置以支持长度可变的路径参数？

两种实现方式可按需选择：

方案1：Angular 16+ 通配符参数（最简实现） #

Angular 16及以上版本原生支持带*后缀的通配符路径参数，可直接匹配当前路径后所有后续分段：

const routes: Routes = [
  {
    // :categories* 会匹配products之后的所有路径分段
    path: 'products/:categories*',
    component: ProductsComponent,
  }
]

在ProductsComponent中按如下方式取值即可：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 示例：访问/products/cat1/cat2/cat3时，得到的分类数组为 ['cat1','cat2','cat3']
  const categoryList = this.route.snapshot.paramMap.get('categories')?.split('/') || [];
  // 后续业务逻辑使用categoryList即可
}

方案2：自定义路由匹配器（兼容全Angular版本） #

如果使用的是低于16的Angular版本，可以通过自定义匹配规则实现需求：

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

// 自定义匹配规则：匹配所有以/products开头的路径
function productPathMatcher(url: UrlSegment[]) {
  if (url.length >= 1 && url[0].path === 'products') {
    return {
      consumed: url,
      posParams: {
        // 把products后的所有路径拼接为categories参数
        categories: new UrlSegment(url.slice(1).map(item => item.path).join('/'), {})
      }
    };
  }
  return null;
}

const routes: Routes = [
  {
    matcher: productPathMatcher,
    component: ProductsComponent,
  }
]

组件内取参数的逻辑和方案1完全一致。

两种方案都支持任意长度的分类路径，包括无分类的/products、N级分类的/products/a/b/c/d/...等所有场景。

内容的提问来源于stack exchange，提问作者thomas coding man