Angular 角度不能匹配任何路线。URL段

我有一个有四列的板，每列都有n个项目，当我点击其中一个项目时，sidenav中的细节部分应该被加载，出于某种原因，我仍然可以得到原因…我得到这个错误

错误：未捕获（承诺）：错误：无法匹配任何路由。URL段：“HyPE4PM/2/details/5413869/details”

每次我尝试打开项目中的详细信息部分时。现在我的

应用程序模块

是延迟加载

待办事项。模块

和我的待办事项模块是延迟加载

线路板。模块

作为子模块，而

线路板。模块

是延迟加载

详细信息。模块

作为子模块

应用程序路由。模块

export const routes: Routes = [
  {
    path: 'HyPE4PM',
    loadChildren: () => import('./modules/lazy/backlog.module').then((mod) => mod.BacklogModule)
  },
  {
    path: 'Error',
    loadChildren: () => import('./modules/lazy/error-site.module').then((mod) => mod.ErrorSiteModule)
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})

/**
 * define the routes for the BacklogComponent module
 */
const routes: Routes = [
  {
    path: '',
    component: BacklogComponent,
    children: [
      {
        path: '2',
        loadChildren: () => import('../lazy/boards-modules/taskboard.module').then((mod) => mod.TaskboardModule)
      },
    ]
  }
];

/**
 * define the routing for the BacklogComponent module
 */
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

const routes: Routes = [
  {
    path: '',
    component: TaksboardComponent,
    children: [
      { path: 'details/:id', redirectTo: 'details/:id/DETAILS', pathMatch: 'full' },
      {
        path: 'details/:id/:detailsSection',
        loadChildren: () => import('../lazy/backlog-item-details.module').then((mod) => mod.BacklogItemDetailsModule),
        outlet: 'rightSidenav',
        data: { preload: true, delay: 2500 }
      }
    ]
  }
];

/**
 * define the routing for the BacklogComponent module
 */
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

待办事项路由。模块

export const routes: Routes = [
  {
    path: 'HyPE4PM',
    loadChildren: () => import('./modules/lazy/backlog.module').then((mod) => mod.BacklogModule)
  },
  {
    path: 'Error',
    loadChildren: () => import('./modules/lazy/error-site.module').then((mod) => mod.ErrorSiteModule)
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})

/**
 * define the routes for the BacklogComponent module
 */
const routes: Routes = [
  {
    path: '',
    component: BacklogComponent,
    children: [
      {
        path: '2',
        loadChildren: () => import('../lazy/boards-modules/taskboard.module').then((mod) => mod.TaskboardModule)
      },
    ]
  }
];

/**
 * define the routing for the BacklogComponent module
 */
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

const routes: Routes = [
  {
    path: '',
    component: TaksboardComponent,
    children: [
      { path: 'details/:id', redirectTo: 'details/:id/DETAILS', pathMatch: 'full' },
      {
        path: 'details/:id/:detailsSection',
        loadChildren: () => import('../lazy/backlog-item-details.module').then((mod) => mod.BacklogItemDetailsModule),
        outlet: 'rightSidenav',
        data: { preload: true, delay: 2500 }
      }
    ]
  }
];

/**
 * define the routing for the BacklogComponent module
 */
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

线路板布线。模块

export const routes: Routes = [
  {
    path: 'HyPE4PM',
    loadChildren: () => import('./modules/lazy/backlog.module').then((mod) => mod.BacklogModule)
  },
  {
    path: 'Error',
    loadChildren: () => import('./modules/lazy/error-site.module').then((mod) => mod.ErrorSiteModule)
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})

/**
 * define the routes for the BacklogComponent module
 */
const routes: Routes = [
  {
    path: '',
    component: BacklogComponent,
    children: [
      {
        path: '2',
        loadChildren: () => import('../lazy/boards-modules/taskboard.module').then((mod) => mod.TaskboardModule)
      },
    ]
  }
];

/**
 * define the routing for the BacklogComponent module
 */
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

const routes: Routes = [
  {
    path: '',
    component: TaksboardComponent,
    children: [
      { path: 'details/:id', redirectTo: 'details/:id/DETAILS', pathMatch: 'full' },
      {
        path: 'details/:id/:detailsSection',
        loadChildren: () => import('../lazy/backlog-item-details.module').then((mod) => mod.BacklogItemDetailsModule),
        outlet: 'rightSidenav',
        data: { preload: true, delay: 2500 }
      }
    ]
  }
];

/**
 * define the routing for the BacklogComponent module
 */
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

然后我使用

路由器。导航
查看所选项目的详细信息：

  public selectItem(event: MouseEvent, position: DetailSections) {
    this.log.trace(`selectItem() in backlog item comp. id: ${this.backlogItem.id}`);
    this.eventService.hideBoardCreator.emit();
    // as the click to these events are bound on the DOM on childs of the click to the details -> we need to stop the event here
    // if TS on other card is shown, it needs to be hidden
    event.stopPropagation();

    // save selection into store
    this.store.dispatch(new BacklogItemSelected(this.backlogItem));

    // show the details section
    this.router.navigate([`/HyPE4PM/${this.configService.boardtype}/details`, this.backlogItem.id, DetailSections[position]]);
  }

这里我分享了一个错误的例子，正如您在示例中看到的那样，如果您尝试转到路由
hype/2/details
，您将得到错误。
添加新路径：'board-routing.module中的details，如下所示

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BoardComponent } from './board.component';

/**
    * Define all available routes
*/
export const routes: Routes = [
{
    path: '',
    component: BoardComponent,
    children: [
   {
      path: 'details',
      loadChildren: () => import('./details/details.module').then((mod) => mod.DetailsModule),
    outlet: 'details'
  }
]
},{
    path: 'details',
loadChildren: () => import('./details/details.module').then((mod) => mod.DetailsModule)
 }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})
export class BoardRoutingModule {}

你能在这里分享你的问题吗？你在哪里定义
details/:id/details
route？没有定义
details/:id/details
路由，正如你在
board routing.module
中看到的那样，定义的路由器是
details/:id/:detailsSection
，如果路由器中没有
:detailsSection
参数，我将重定向到
details/:id/details
@GaurangDhorda，我将尝试在堆栈闪电中重现错误。我刚刚用一个无法工作的错误堆栈闪电更新了问题，你不能让同一条路径两次加载同一个模块，一次作为根目录，另一次作为子目录，这是行不通的。你测试过了吗。在投票否决之前？是的，我测试过，第一个想法是将模块作为子模块加载，如果您在加载模块详细信息时检查您的解决方案，那么模块板就不见了。这就是将模块作为板模块1的子模块加载的想法。将一个
放入board.component.html，然后放入board-routing.module.ts，在“details”的子路径中删除“outlet:“details”。其余的将按你的意愿工作。。检查一下这场闪电战。您必须对应用程序路由行为进行一些更改。