如何使用Angular 5路由匹配任意深度的路径？

这个问题我之前也碰到过，重复写多层路由确实太麻烦了，Angular其实提供了更优雅的解决方案，不用再写一堆重复的路由配置啦！

步骤1：用通配符简化路由配置 #

你只需要在路由模块里添加一条规则，就能匹配所有以items/开头的任意深度路径，完全替代之前多层级的重复配置：

const routes: Routes = [
  // 其他更具体的路由规则请放在前面
  { 
    path: 'items/**', 
    component: ItemComponent 
  }
];

注意：这条路由一定要放在所有更具体的路由规则后面，不然会优先匹配它，导致其他路由无法正常生效。

步骤2：在组件内解析完整路径 #

接下来在ItemComponent里，通过ActivatedRoute获取完整的路径片段，自己处理分类树和item的解析逻辑：

先注入ActivatedRoute，然后在初始化时获取路径片段：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, UrlSegment } from '@angular/router';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})
export class ItemComponent implements OnInit {
  pathSegments: string[] = [];

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 提取所有路径片段，比如路径是items/cat_a/sub_a/item_x的话，得到的就是['cat_a', 'sub_a', 'item_x']
    this.pathSegments = this.route.url.map((segment: UrlSegment) => segment.path);
    
    // 接下来就可以根据这个数组自行解析分类结构和对应的item了
    console.log('当前路径片段:', this.pathSegments);
  }
}

不管你的路径是两层、三层还是更深的层级，这条路由规则都能匹配到，而且你能拿到完整的路径片段去做后续的业务逻辑处理，完全不用再担心层级扩展的问题。

补充小提示 #

如果后续需要给路由添加额外参数，还可以结合queryParams一起使用，核心的动态路径匹配问题用**通配符就完全解决了，既简洁又灵活。

内容的提问来源于stack exchange，提问作者EPLKleijntjens