时间戳

首页 > 解决方案 > app-routing.module.ts 可以有 2 条路径：/id

angular - app-routing.module.ts 可以有 2 条路径：/id

问题描述

我试图用 :/id 打开 maindetail 和 childdetails 页面。但是当我在 localhost 上运行它时，maindetail 页面中没有我想要的卡。

我想要做的是，我可以在仪表板中单击名称“aniq”（图 1）并显示子详细信息页面。但是子详细信息页面没有显示我想要的卡片（图 2）。但是，当我尝试重新输入链接 localhost:8100/maindetal（图 3）时，该卡正在显示。我不知道出了什么问题。谁能帮帮我，谢谢。

这是我的 app-routing.module.ts

const routes: Routes = [
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: './register/register.module#RegisterPageModule' },
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' },
   { path: 'maindetail', loadChildren: './pages/maindetail/maindetail.module#MaindetailPageModule' },
  { path: 'maindetail/:id', loadChildren: './pages/maindetail/maindetail.module#MaindetailPageModule' },
  { path: 'childdetails', loadChildren: './pages/childdetails/childdetails.module#ChilddetailsPageModule' },
  { path: 'childdetails/:id', loadChildren: './pages/childdetails/childdetails.module#ChilddetailsPageModule' },
];

图 1

图 2 图 3

标签： angulartypescriptionic-frameworkionic4

解决方案

是的，您可以在 Angular 中有多个带参数的路由。你甚至可以在同一条路由中有多个参数！

但是，通常在使用延迟加载模块时，您将在该延迟加载模块中拥有另一个路由模块。我知道“模块”这个词经常被扔掉，所以我会用一个应该有帮助的例子来分解它。

app-routing.module.ts

让我们只关注子详细信息模块。下面我们只有一条路线/childdetails

const routes: Routes = [
  { path: 'childdetails', loadChildren: 
 './pages/childdetails/childdetails.module#ChilddetailsPageModule' },
];

但是，我们想要获取将作为路由参数传入的 id。所以我们创建了一个文件，childdetails-routing.module.ts无论我们的模块在哪里。在该文件中，我们将拥有几乎完全相同的设置，如下所示：

const routes: Routes = [
  { path: ':id', component: yourChildDetailComponent },
];

您可能需要参考确切的文档以准确获取详细信息https://angular.io/guide/lazy-loading-ngmodules#configure-the-feature-modules-routes

推荐阅读