Angular 的路由器上的重复路径

Question

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

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

Answer 1

最终，路由只是 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);

Answer 2

我已经解决了与您的问题非常相似的问题。这是我用过的路由配置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FolderDetailsComponent } from './folder-details.component';

    const routes: Routes = [
        {
            path: '',
            component: FolderDetailsComponent,
        },
        {
            path: 'folders/:folder_id', loadChildren: () =>
                import('./folder-details.module').then(m => m.FolderDetailsModule)            
        }];

    @NgModule({
        imports: [RouterModule.forChild(routes)],
        exports: [RouterModule]
    })
    export class FolderRoutingModule { }

此模式将匹配路径，例如：/folders/1/folders/2/folders/3

Angular 的路由器上的重复路径

Repeating Path on Angular's Router

recursion

routing

angular

angular5

angular6