angular6 - 导航到其他页面时，继续显示导航选项卡

Question

我正在将我的应用程序从 ionic 3 迁移到 ionic 4，我想知道如何在页面之间导航时继续显示导航选项卡。当我这样做时：

[routerLink]="'/offers/'" routerDirection="forward"

选项卡消失了，当我几乎总是想显示导航选项卡时该怎么办？

在页面中或页面中定义路线tabs.router.module.ts？

希望有人可以帮助我解决这个问题。

标签： angular6angular7ionic4

Answer 1

像这样的事情正在为我做。所以基本上是的，在路由器的路由模块中定义路由。

app.module.ts

import { NgModule } from '@angular/core';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        IonicModule.forRoot(),
        AppRoutingModule,
    ],
    providers: [
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    ],
    bootstrap: [AppComponent],
})
export class AppModule {
}

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    { path: '', redirectTo: 'start/tabs', pathMatch: 'full' },
    { path: 'start', loadChildren: './pages/tabs/tabs.module#TabsModule' },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {
}

tabs.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { PageAPageModule } from '../pageA/PageA.module';
import { PageBPageModule } from '../pageB/PageB.module';

import { TabsPage } from './tabs.page';
import { TabsPageRoutingModule } from './tabs.page-routing.module';

@NgModule({
    imports: [
        CommonModule,
        IonicModule,
        PageAPageModule,
        PageBPageModule,
        TabsPageRoutingModule,
    ],
    declarations: [
        TabsPage,
    ],
})
export class TabsModule {
}

tabs.page-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageAPage } from '../pageA/pageA.page';
import { TabsPage } from './tabs.page';

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'pageA',
                children: [
                    { path: '', component: PageAPage },
                    { path: 'subPageA1', loadChildren: '../subPageA1/subPageA1.module#SubPageA1PageModule' },
                    { path: 'subPageA2', loadChildren: '../subPageA2/subPageA2.module#SubPageA2PageModule' },
                ],
            },
            {
                path: 'pageB',
                children: [
                    { path: '', loadChildren: '../pageB/pageB.module#PageBPageModule' },
                    { path: ':id', loadChildren: '../pageB-detail/pageB-detail.module#PageBDetailModule' },
                ],
            },
            {
                path: 'pageX',
                ...
            },
            {
                path: '', redirectTo: '/start/tabs/pageA', pathMatch: 'full',
            },
        ],
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
})
export class TabsPageRoutingModule {
}

tabs.page.html

<ion-tabs>
    <ion-tab-bar color="dark" slot="bottom">
        <ion-tab-button tab="pageA">
            <ion-icon name="calendar"></ion-icon>
            <ion-label>pageA</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="pageB">
            <ion-icon name="contacts"></ion-icon>
            <ion-label>pageB</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="pageX">
            <ion-icon name="contacts"></ion-icon>
            <ion-label>pageX</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

app.component.html

<ion-list>
    <ion-menu-toggle auto-hide="false">
        <ion-item routerLink="/start/tabs/pageA">
            <ion-icon slot="start" name="person"></ion-icon>
            <ion-label>pageA</ion-label>
        </ion-item>
    </ion-menu-toggle>

    <ion-menu-toggle auto-hide="false">
        <ion-item routerLink="/start/tabs/pageA/subPageA1">
            <ion-icon slot="start" name="person"></ion-icon>
            <ion-label>subPageA1</ion-label>
        </ion-item>
    </ion-menu-toggle>

    <ion-menu-toggle auto-hide="false">
        <ion-item routerLink="/start/tabs/pageB">
            <ion-icon slot="start" name="person"></ion-icon>
            <ion-label>pageB</ion-label>
        </ion-item>
    </ion-menu-toggle>

    <ion-menu-toggle auto-hide="false">
        <ion-item routerLink="/start/tabs/pageX">
            <ion-icon slot="start" name="person"></ion-icon>
            <ion-label>pageX</ion-label>
        </ion-item>
    </ion-menu-toggle>
</ion-list>