[英]How to implement routing with id correctly?
I want to route with an Id between the pages. 我想在页面之间使用ID进行路由。 I do so with [routerLink]
. 我使用[routerLink]
这样做。 But when I run the app I get an error: Error: Cannot find module '../friend/friend-details.module'
. 但是,当我运行该应用程序时,出现错误: Error: Cannot find module '../friend/friend-details.module'
。 I suppose that I didn't type in correctly the path but I wouldn't know what I could try further. 我想我没有正确输入路径,但是我不知道该怎么做。 So I want to navigate to friend-details and pass on the id so it know which item it was. 因此,我想导航到好友详细信息并传递ID,以便知道它是哪个项目。 The friend-details folder is in the friend folder, so the path should actually work. friend-details文件夹位于friend文件夹中,因此该路径应该实际可用。
page.html page.html中
<ion-card *ngFor="let friend of loadedFriends">
<ion-avatar [routerLink]="['/', 'tabs', 'friend', friend.id]" slot="start">
</ion-card>
tabs.router.module.ts tabs.router.module.ts
const routes: Routes = [
{
path: 'tabs',
component: TabsPage, //render component that holds your tabs
children: [
{
path: 'friend',
children: [
{
path: '',
loadChildren: '../friend/friend.module#FriendPageModule'
},
{
path: ':friendId',
loadChildren: '../friend/friend-details.module#FriendDetailsPageModule' //maybe delete the same page of app.module.ts
},
]
},
EDIT: 编辑:
I tried a solution in which I used a click event: 我尝试了一种使用click事件的解决方案:
openFriendDetails() {
this.router.navigate(['friend/:id']);
}
which I take access from app-routing.module.ts 我从app-routing.module.ts获取访问权限
{ path: 'friend/:id', loadChildren: './friend-details/friend-details.module#FriendDetailsPageModule' },
The navigation works after this change. 更改后,导航将起作用。 But somehow I can't make use of my id since the friend-details page is frozen somehow and I can't change my page anymore. 但是由于朋友详细信息页面被冻结了,我无法使用我的ID,因此我无法再更改页面了。
check your friend-details module
path and put id
as second router link param. 检查您的friend-details module
路径,并将id
作为第二个路由器链接参数。 for example : [routerLink]="['/tabs/friend', friend.id]"
this will generate the route /tabs/friend/:friendId
and you can access by ActivatedRoute.params.friendId
into your component 例如: [routerLink]="['/tabs/friend', friend.id]"
这将生成路由/tabs/friend/:friendId
,您可以通过ActivatedRoute.params.friendId
访问您的组件
first you need to change your children
to this 首先,您需要将您的children
换成这个
children: [
{
path: '',
pathMatch: 'full',
loadChildren: '../friend/friend.module#FriendPageModule'
},
{
path: ':friendId',
loadChildren: '../friend/friend-details.module#FriendDetailsPageModule' //maybe delete the same page of app.module.ts
},
]
then also you need to add path: '', component: yourcomponent
in your FriendDetailsPageModule
routing 然后还需要在FriendDetailsPageModule
路由中添加path: '', component: yourcomponent
You mention that: 您提到:
The friend-details folder is in the friend folder, so the path should actually work. friend-details文件夹位于friend文件夹中,因此该路径应该实际可用。
Are you being accurate with your words? 你说的话准确吗? If so the path should be: 如果是这样,则路径应为:
../friend/friend-details/friend-details.module#FriendDetailsPageModule
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.