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

问题描述

我想同时使用这两种样式<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>

标签： javascriptangularionic-frameworkionic4

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

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

离子启动 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]中添加上述代码

谢谢你。

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

问题描述

解决方案

推荐阅读