Question

我正在使用Ionic 4，我想在不同的页面中执行不同的菜单内容。我在代码中添加了menuId，但仅获得第二页菜单。我的首页菜单丢失了。

Answer 1

我认为您应该构建1个菜单，然后根据所访问的页面填充其页面列表。

因此您的代码应如下所示：

import { Component, OnInit } from '@angular/core';
import { Router, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.page.html',
  styleUrls: ['./menu.page.scss'],
})
export class MenuPage implements OnInit {
  selectedPath = '';

  pages = getPages();

  constructor(private router: Router) {
    this.router.events.subscribe((event: RouterEvent) => {
      if (event && event.url) {
        this.selectedPath = event.url;
      }
    });
  }

  getPages() : any[] {

   if (this.router.url === '/page1') { 
       return [
    {
      title: 'First Page with Tabs',
      url: '/menu/first'
    },
    {
      title: 'Second Page blank',
      url: '/menu/second'
    }
  ];
}

   if (this.router.url === '/page2') { 
     return [
    {
      title: 'First Page with Tabs',
      url: '/menu/first'
    },
    {
      title: 'Second Page blank',
      url: '/menu/second'
    }
  ];
}
  }

  ngOnInit() {

  }

}

然后显示如下：

<ion-split-pane>
  <ion-menu contentId="content">

    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
          <ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectedPath.startsWith(p.url)">
            <ion-label>
              {{ p.title }}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>

        <ion-item tappable routerLink="/login" routerDirection="root">
          <ion-icon name="log-out" slot="start"></ion-icon>
          Logout
        </ion-item>

      </ion-list>

    </ion-content>

  </ion-menu>

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

</ion-split-pane>

有关设置菜单的完整教程，请参见：

How to Combine Ionic 4 Tabs and Side Menu Navigation [v4] - Ionic AcademyIonic Academy

尽管我在上面用于获取getPages()的示例中使用的代码是您自己编写的代码。

如何为每个页面创建不同的菜单页面

1 个答案: