Angular2+路由匹配以/tree开头的任意路径问题求助

你遇到的问题核心是Angular Router和ui-router的URL匹配语法不兼容，ui-router那套{tree:.*}的写法在Angular Router里完全不生效，咱们得用Angular自己的通配符参数规则来实现需求。

第一步：修正路由配置 #

要匹配projects/:id/repository/tree/之后的所有层级路径，同时把这部分内容捕获为可复用的参数，你需要把路由改成这样：

const routes: Routes = [
  { 
    path: 'projects/:id/repository/tree/:treePath**', 
    component: FilesListComponent 
  }
];

这里的:treePath**是关键：

• :treePath定义了一个参数名，方便后续在组件中获取
• **是Angular Router的通配符，表示匹配任意深度的后续路径段（比如src、src/app、src/app/core都能覆盖）

第二步：在组件中获取捕获的路径 #

接下来在FilesListComponent里，通过ActivatedRoute就能拿到我们需要的路径参数了：

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

@Component({
  selector: 'app-files-list',
  templateUrl: './files-list.component.html',
  styleUrls: ['./files-list.component.css']
})
export class FilesListComponent implements OnInit {
  fullTreePath: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 订阅参数变化（适合路由复用、参数动态更新的场景）
    this.route.paramMap.subscribe(params => {
      // getAll()会返回路径段的数组，比如['src', 'app', 'core']
      const pathSegments = params.getAll('treePath');
      this.fullTreePath = pathSegments.join('/');
      
      // 现在就可以用fullTreePath发起API请求了
      console.log('要请求的文件路径:', this.fullTreePath);
    });

    // 如果只需要初始加载时的路径值，用snapshot更简单
    // const initialSegments = this.route.snapshot.paramMap.getAll('treePath');
    // this.fullTreePath = initialSegments.join('/');
  }
}

补充小技巧 #

如果不需要给参数命名，也可以直接用**匹配，但这种方式无法通过paramMap直接获取，得手动从路由URL段中提取：

this.route.url.subscribe(segments => {
  const treeSegmentIndex = segments.findIndex(seg => seg.path === 'tree');
  if (treeSegmentIndex !== -1) {
    const pathParts = segments.slice(treeSegmentIndex + 1).map(s => s.path);
    this.fullTreePath = pathParts.join('/');
  }
});

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