带参数的嵌套离子角制表符路由

Question

我试图理解Angular中的路由概念。

我已经创建了带有API调用的应用程序，如下流程图所示。

流程说明

1. 应用程序的登录页面属于选项卡布局-[main.routing.module.ts]
2. 在单击选项卡2时，您将转到带有项目列表的新页面-[tabs2.routing.module.ts]
3. 单击具有自己的“ id”的项目之一，将打开子项目页面。 routerlink正在与参数一起使用
4. 单击具有自己的“ id”的子项之一，将打开子选项卡页面。 routerlink正在与params一起使用-subtabs.routing.module.ts

main.routing.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { AuthGuard } from 'src/app/gaurds/auth.guard';

const routes: Routes = [
    {
        path: 'tabs',
        canActivate: [AuthGuard],
        component: TabsPage,
        children: [
            {
                path: 'tabs1',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: () =>
                            import('../tabs1/tabs1.module').then(m => m.Tabs1PageModule)

                    }

                ]
            },
            {
                path: '',
                canActivate: [AuthGuard],
                loadChildren: '../Tabs2/tabs2.routing.module#Tabs2RoutingModule'
            },
            {
                path: '',
                redirectTo: '/tabs/tabs1',
                pathMatch: 'full'
            }
        ]

    },
    {
        path: '',
        redirectTo: '/tabs/tabs1',
        pathMatch: 'full'
    }
];
@NgModule({
    imports: [
        RouterModule.forChild(routes),
    ],
    exports: [RouterModule]
})
export class TabsPageRoutingModule { }

tabs2.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from 'src/app/gaurds/auth.guard';

const routes: Routes = [
    {
        path: 'tabs2',
        canActivate: [AuthGuard],
        children: [
            {
                path: 'items',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: () =>
                            import('../tabs2/items/items.module').then(m => m.ItemsgroupPageModule)
                    }

                ]
            },
            {
                path: 'subitems/:id',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: () =>
                            import('../tabs2/subitems/subitems.module').then(m => m.SubitemsPageModule)
                    },
                ]
            },
            {
                path: 'subtabs',
                canActivate: [AuthGuard],
                loadChildren: './subtabs/subtabs.module#SubtabsPageModule'
            },
            {
                path: '',
                redirectTo: '/shared/tabs/tabs2/items',
                pathMatch: 'full'
            }
        ]

    },
    {
        path: '',
        redirectTo: '/shared/tabs/tabs2/items',
        pathMatch: 'full'
    },
  {  },
];
@NgModule({
    imports: [
        RouterModule.forChild(routes),
    ],
    exports: [RouterModule]
})
export class Tabs2RoutingModule { }

subtabs.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes, ActivatedRoute } from '@angular/router';
import { SubtabsPage } from './Subtabs.page';
import { AuthGuard } from 'src/app/gaurds/auth.guard';

const routes: Routes = [
    {
        path: '',
        canActivate: [AuthGuard],
        component: SubtabsPageModule,
        children: [
            {
                path: 'subtabs-1/:subitems-id',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: () =>
                            import('./subtabs-1/subtabs-1.module').then(m => m.Subtabs-1PageModule)

                    }

                ]
            },
            {
                path: 'subtabs-2/:subitems-id',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: () =>
                            import('./subtabs-2/subtabs-2.module').then(m => m.Subtabs-2PageModule)

                    }

                ]
            },
            {
                path: 'subtabs-3/:subitems-id',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: () =>
                            import('./subtabs-3/subtabs-3.module').then(m => m.Subtabs-3PageModule)

                    }

                ]
            {
                path: '',
                redirectTo: '/tabs/tabs2/subtabs/subtabs-1',
                pathMatch: 'full'
            }
        ]

    },
    {
        path: '',
        redirectTo: '/tabs/tabs2/subtabs/subtabs-1',
        pathMatch: 'full'
    }
];
@NgModule({
    imports: [
        RouterModule.forChild(routes),
    ],
    exports: [RouterModule]
})
export class ScheduledetailsPageRoutingModule {
}

问题

1. 我无法将ID发送到所有子选项卡/子项目，因为它需要ID才能显示数据

2. 已将ID放在子标签中，如下所示：

   简介

       <ion-tab-button tab="subtabs-2/{{this.id}}">
           <ion-icon name="paper"></ion-icon>
           <ion-label>Legislations</ion-label>
       </ion-tab-button>
   
       <ion-tab-button tab="subtabs-3/{{this.id}}">
           <ion-icon name="apps"></ion-icon>
           <ion-label>Tasks</ion-label>
       </ion-tab-button>
   </ion-tab-bar>
   

3. 以上内容将正确地路由到第一个子选项卡，并且无法处理辅助选项卡

是否有更好的方法来执行此操作，或者将数据更改为带有参数的嵌套制表符，因为数据是恒定的

Answer 1

这不是最好的方法。

经过大量搜索后，我将routerlink添加到ion-tab标签中

路由通过从routerlink获取ID进行工作，

<ion-tabs>
        <ion-tab-bar slot="top">
            <ion-tab-button tab="subtabs-1">
                <ion-icon name="book"></ion-icon>
                <ion-label>SubTabs 1</ion-label>
            </ion-tab-button>

            <ion-tab-button tab="subtabs-2" [routerLink]="['subtabs-2', this.id]">
                <ion-icon name="paper"></ion-icon>
                <ion-label>SubTabs 1</ion-label>
            </ion-tab-button>

            <ion-tab-button tab="subtabs-3" [routerLink]="['subtabs-3', this.id]">
                <ion-icon name="apps"></ion-icon>
                <ion-label>SubTabs 1</ion-label>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>

该ID将由subtabs.page.ts提供通过将变量声明为id: any。

id的值是从subitems.page.ts提供的。

这里的id是subitems-id