在 angular 中声明多个深度路线的更好方法

Question

我想走两条主要路线。一个是 assets/ANY_NUMBER_OF_LEVELS/browse 和 assets/ANY_NUMBER_OF_LEVELS。理想情况下，接收 ANY_NUMBER_OF_LEVELS 的组件只会接收一个级别数组。

目前我是这样做的：

const routes: Routes = [
  { path: '', component: BrowseComponent },

  // all possible paths for browse //
  { path: 'assets/:level1/:level2/:level3/:level4/browse', component: BrowseComponent },
  { path: 'assets/:level1/:level2/:level3/browse', component: BrowseComponent },
  { path: 'assets/:level1/:level2/browse', component: BrowseComponent },
  { path: 'assets/:level1/browse', component: BrowseComponent },
  { path: 'assets/browse', component: BrowseComponent },

  // all possible paths for assets //
  { path: 'assets/:level1/:level2/:level3/:level4/:id', component: AssetComponent },
  { path: 'assets/:level1/:level2/:level3/:id', component: AssetComponent },
  { path: 'assets/:level1/:level2/:id', component: AssetComponent },
  { path: 'assets/:level1/:id', component: AssetComponent },
  { path: 'assets/:id', component: AssetComponent },
  { path: '**', component: NotFoundComponent }
];

虽然它确实有效，但不是很优雅。有更好的方法吗？

Answer 1

我想你可以用 UrlMatcher 来做这个。

这是一种实现方法：

const assetsUrlMatcher = (segments: UrlSegment[], group: UrlSegmentGroup, route: Route) => {

  if (!segments.length || segments[0].path !== 'assets') {
    return null;
  }

  return { 
    consumed: segments,
    posParams: {
      id: segments[segments.length - 1],
      // Add other segments here..
    }
  };
};

const routes: Routes = [
  /* ... */
  {
    path: assetsUrlMatcher,
    component: AssetComponent,
  }
  /* ... */
];

<button [routerLink]="['assets/level1/level2/level3/', 123]">Multiple levels</button>

StackBlitz.

在 angular 中声明多个深度路线的更好方法

better way to declare multiple depth routes in angular

angular-ui-router

angular