时间戳

首页 > 解决方案 > Angular 路由器上的重复路径

angular - Angular 路由器上的重复路径

问题描述

我有一个要处理嵌套路由的组件。我有一个嵌套的数据结构，它的长度可能是无限的。有没有一种方法可以创建如下所示的嵌套路由，而无需在 Angular 的路由器中手动创建它？我正在使用 Angular 6。

/items/{id}
/items/{id}/child/{id}
/items/{id}/child/{id}/child/{id}

标签： angularrecursionroutingangular5angular6

解决方案

最终，路由只是类型数组中的对象Route：

const appRoutes: Routes = [
  { path: 'your-path', component: YourPathComponent },
];

因此，如果我们定义一个将新对象推送到此数组中的函数，那么这将允许您遍历您的数据结构（您没有提到它是什么结构），然后appRoutes在这种情况下将这些对象推送到数组中。

它最终会看起来像：

function generateRoutes(dataStructure: any) {
  // Extract data from your structure into your new array using Array.map() etc. 
  // Assuming we use a for the Array.map() function. 

  dataStructure.map((item: Route) => {
    return {
      path: item[0].path,
      component: item.component // You may need to cast this to the Component interface
    }
  })
}

const appRoutes: Routes = generateRoutes(routesData);

推荐阅读