前端之家

  1. 首页
  2. 问答

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

• 问答

我有两条主要路线。 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',{ path: 'assets/:level1/:level2/:level3/browse',{ path: 'assets/:level1/:level2/browse',{ path: 'assets/:level1/browse',{ path: 'assets/browse',// all possible paths for assets //
  { path: 'assets/:level1/:level2/:level3/:level4/:id',component: AssetComponent },{ path: 'assets/:level1/:level2/:level3/:id',{ path: 'assets/:level1/:level2/:id',{ path: 'assets/:level1/:id',{ path: 'assets/:id',{ path: '**',component: NotFoundComponent }
];

尽管它确实可以工作，但不是很优雅。有更好的方法吗？

jinnaying 回答：在角度中声明多个深度路线的更好方法

我认为您可以为此使用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。

angularangular-ui-router
本文链接：https://www.f2er.com/3046258.html

大家都在问