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

Question

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

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

这是我的应用-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 中有多个带有参数的路由。您甚至可以在同一条路线中使用多个参数！

但是，通常在使用 lazy-loading 模块时，您会在 lazy-loading 模块内有另一个路由模块。我知道 "module" 这个词经常被使用，所以我会用一个希望能有所帮助的例子来分解它。

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 可以有 2 个路径：/id

Can app-routing.module.ts has 2 path with :/id

typescript

ionic-framework

angular

ionic4