带有参数的嵌套 ionic-angular 选项卡路由

Question

我正在尝试理解 Angular 中的路由概念。

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

流程说明

应用程序的着陆页采用标签布局 - [main.routing.module.ts]
单击选项卡 2 后，您将转到包含项目列表的新页面 - [tabs2.routing.module.ts]
单击其中一个有自己的 "id" 的项目，子项目页面将打开。 routerlink 正在与参数一起使用
单击其中一个有自己的子项 "id"，子选项卡页面打开。 routerlink 正在与参数一起使用 - 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 {
}

问题

我无法将 ID 发送给所有 subtabs/subitems，因为它需要 ID 来显示数据

已将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>

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

是否有更好的方法来执行此操作，或者将路由更改为带有参数的嵌套选项卡，因为数据是常量

Answer 1

这不是最好的方法。

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

路由与从路由器链接中获取 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>

The Id will be provided by subtabs.page.ts by declaring a variable as id: any.

The value for id is being provided from subitems.page.ts.

Here the id is subitems-id

带有参数的嵌套 ionic-angular 选项卡路由

Nested ionic-angular tabs routing with params

angular

ionic-framework

angular-ui-router

ionic4

angular-routing