Question

我试图用：/ id打开maindetail和childdetails页面。但是，当我在本地主机上运行它时，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' },
];

image 1

image 2 image 3

Answer 1

是的，您可以在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

app-routing.module.ts可以有两个路径：/ id

1 个答案: