Angular - 帶有 loadChildren 的組件的多個路由？

Question

我正在嘗試為子組件設置多個角度路由，並且必須使用延遲加載 (loadChildren)。

• /page1/from1 -> 我的組件
• /page2/from2 -> 我的組件
• /page1/from2 -> 不匹配
• /page2/from1 -> 不匹配

正如我們所見， /page1/ from1和/page2/from2應該顯示 show MyComponent ，但/page1/from2不能路由到MyComponent 。

這是我嘗試過的：

應用路由：

const routes: Routes = [
   { path: 'page1', loadChildren: () => import(`./MyComponentModule.module`).then(x => x.MyComponentModule) },
   { path: 'page2', loadChildren: () => import(`./MyComponentModule.module`).then(x => x.MyComponentModule) }
];

組件模塊路由：

const routes: Routes = [
   { path: 'from1', component: MyComponentModule }, 
   { path: 'from2', component: MyComponentModule }
];

此解決方案的問題

這匹配 /page1/from2 以及 /page2/from1，這不是我需要的。 有沒有一種優雅的方法來做到這一點？

Answer 1

您可以使用路由器參數

const routes: Routes = [
   { path: 'page/:id', loadChildren: () => import(`./MyComponentModule.module`).then(x => x.MyComponentModule) },
];

.

const routes: Routes = [
   { path: 'from/:id', component: MyComponentModule }, 
];