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

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

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

离子启动 myApp 选项卡 --capacitor

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

现在我们有选项卡样式的项目，我们想在其中添加侧菜单。所以，让我们创建一个名为作为使用离子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]

谢谢你。