Angular 無法匹配任何路由。 URL段

Question

我有一個有四列的板，每列填充 n 個項目，當我單擊其中一個項目時，應加載 sidenav 中的詳細信息部分，出於某種原因，我仍然可以理解為什么.. .我收到此錯誤Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'HyPE4PM/2/details/5413869/DETAILS' 每次我嘗試打開項目中的詳細信息部分時， Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'HyPE4PM/2/details/5413869/DETAILS' 。 現在的方式是我的app.module是延遲加載backlog.module ，而我的 backlog 模塊是延遲加載board.module作為子級，而board.module是延遲加載details.module作為子級。

應用程序路由模塊

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: []
})

積壓路由.module

/**
 * 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]
})

board-routing.module

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]
})

然后我使用路由器。導航到router.navigate所選項目的詳細信息：

  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]]);
  }

在這里，我分享了錯誤的堆棧閃電戰，如您在示例中所見，如果您嘗試將 go 路由到hype/2/details ，您將收到錯誤。

Answer 1

像這樣在 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 {}

Answer 2

在你的 app-routing.module

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: 'src/app/customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: 'src/app/orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

這是一個如何使用 延遲加載的基本示例