Ionic 5：有没有办法结合标签和侧边菜单

Question

我想同时使用<ion-tabs></ion-tabs> 和<ion-menu></<ion-menu> 两种样式，当我同时激活它们时，侧边菜单消失了，我试图将我的标签变成一个组件，但我得到了相同的结果，不知道如何去做吧？我不希望标签显示在特定页面中，我希望它们出现在整个应用程序中

<ion-split-pane>
    <ion-menu contentId="content">
        <ion-header>
            <ion-toolbar>
                <ion-title>Menú</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
                    <ion-item [routerLink]="p.url" routerDirection="forward"
                              [class.active-item]="selectedPath === p.url">
                        <ion-icon name="{{p.icon}}" slot="start"></ion-icon>
                        {{p.title}}
                    </ion-item>

                </ion-menu-toggle>
                <ion-item tappable="" (click)="logoutAction()">
                    <ion-icon name="log-out" slot="start"></ion-icon>
                    Salir
                </ion-item>
            </ion-list>

        </ion-content>
    </ion-menu>
    <ion-router-outlet id="content" main></ion-router-outlet>

</ion-split-pane>

<ion-tabs>
<ion-tab-bar slot="bottom" color="dark">
    <ion-tab-button tab="feed">
        <ion-icon name="paper"></ion-icon>
        <ion-label>Feed</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="messages">
        <ion-icon name="send"></ion-icon>
        <ion-label>Messages</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="notifications">
        <ion-icon name="notifications"></ion-icon>
        <ion-label>Contact</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="settings">
        <ion-icon name="cog"></ion-icon>
        <ion-label>Settings</ion-label>
    </ion-tab-button>

</ion-tab-bar>

Answer 1

我知道我回答得太晚了，但它可能会对未来的用户有所帮助。我想结合 sidemenu 和 tabs 样式。所以我按照以下方式做到了。 （我在这个例子中使用了新项目）

1. 使用以下 cli 命令下载新的 ionic 5 tabs 项目

ionic 启动 myApp 选项卡 --capacitor

使用ionic serve 运行项目以检查项目是否正常运行。

现在我们有了标签样式的项目，我们想在其中添加侧菜单。 因此，让我们使用 ionic cli 命令创建名为“收件箱”的新页面：ionic g page inbox。

app-routing.module.ts 文件将如下所示

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

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'inbox',
    loadChildren: () => import('./inbox/inbox.module').then( m => m.InboxPageModule)
  }


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

好的，现在我们只需在侧边菜单中添加这个收件箱页面。这样做

2.转到app.component.html并在其中添加以下代码（删除旧代码）

<ion-app>
    <ion-split-pane contentId="main-content">
        <ion-menu contentId="main-content" type="overlay">
            <ion-content>
                <ion-list id="inbox-list">
                    <ion-list-header>Side Menu</ion-list-header>
                    <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
                        <ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none"
                                  detail="false" [class.selected]="selectedIndex == i">
                            <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
                            <ion-label>{{ p.title }}</ion-label>
                        </ion-item>
                    </ion-menu-toggle>
                </ion-list>
            </ion-content>
        </ion-menu>
        <ion-router-outlet id="main-content"></ion-router-outlet>
    </ion-split-pane>
</ion-app>

3.转到app.component.ts，您的 app.component.ts 文件应如下所示。

import {Component, OnInit} from '@angular/core';
import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit{
  public selectedIndex = 0;
  public appPages = [
    {
      title: 'Home',
      url: '/tabs',
      icon: 'home'
    },
    {
      title: 'Inbox',
      url: '/inbox',
      icon: 'mail'
    }
  ];
  constructor() {
    this.initializeApp();
  }

  initializeApp() {
    SplashScreen.hide();
  }

  ngOnInit() {
    const path = window.location.pathname.split('/')[1];
    console.log(path)
    if (path !== undefined) {
      this.selectedIndex = this.appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
    }
  }
}

4.转到app.component.scss添加以下样式

   ion-item.selected {
  --color: var(--ion-color-primary);
}

5.现在最后一步转到您要添加侧边菜单的页面并在标题部分添加侧边菜单代码。 示例：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Your Page Title
    </ion-title>
  </ion-toolbar>
</ion-header>

[在我们的例子中，我们将在inbox.page.html tab1.page.html tab2.page.html tab3.page.html中添加上面的代码]

谢谢。