Вложенные ионно-угловые закладки с маршрутизацией - PullRequest
Новая
       50

Вложенные ионно-угловые закладки с маршрутизацией

1 голос
/ 19 сентября 2019

Я пытаюсь понять принципы маршрутизации в Angular.

Я создал приложение с вызовами API, как показано ниже на блок-схеме.

enter image description here

Объяснение для потока

  1. Целевая страница приложения попадает в макет вкладок - [main.routing.module.ts]
  2. При нажатии на вкладки 2 вы попадаете на новую страницу со списком элементов - [tabs2.routing.module.ts]
  3. При нажатии на один из элементов, который имеет свой собственный идентификатор"страница подэлементов открыта. routerlink используется с параметрами
  4. При щелчке по одному из подэлементов, который имеет свой собственный «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 {
}

Проблема

  1. Я не могу отправить идентификаторы во все вложенные вкладки / подпункты, так как для отображения данных требуется идентификатор.

  2. . Поставил идентификатор через вложенные вкладки следующим образом:

    Введение 

        <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. Вышеприведенное будет корректно перенаправлять на первые вложенные вкладки и не будет работать во вспомогательных вкладках

Есть ли лучший способ сделать это или изменить маршрутизацию на вложенные вкладки с параметрами, поскольку данные постоянны

1 Ответ

0 голосов
/ 27 сентября 2019

Это не самый лучший метод для подражания.

После долгих поисков я добавил routerlink к тегам ion-tab

Маршрутизация работает с получением идентификатора из routerlink, 

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

Идентификатор будет предоставлен subtabs.page.ts, объявив переменную как id: any.

Значение для id предоставлено на subitems.page.ts.

Здесь идентификатор - это subitems-id

...