web-dev-qa-db-ja.com

Ionic 2-同時に複数のメニュー（右-左）

状況：

Ionic 2アプリに右メニューが機能しています。左メニューを追加する必要があります。試しましたが、今のところ失敗しました。これが私の試みです。

コード：

このコードでは、右側のメニューは正しく機能していますが、左側のメニューは表示されません。

app.html：

<ion-menu [content]="content" id="menu1">

    <ion-header>
        <ion-toolbar>
            <ion-title>Pages</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content>
        <ion-list>
            <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
                {{p.title}}
            </button>
        </ion-list>
    </ion-content>

</ion-menu>


<ion-menu [content]="content" id="menu2">

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

  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app.component.ts：

constructor(
        public platform: Platform,
        public menu: MenuController
    ) {
        this.initializeApp();

        this.pages = [
            { title: 'Home', component: HomePage },
            { title: 'Login', component: LoginPage },
        ];

        this.menu.enable(true, 'menu1');
        this.menu.enable(true, 'menu2');
    }

質問：

左と右の2つのメニューを同時に正しく機能させるにはどうすればよいですか？

angulartypescriptionic-frameworkionic2ionic3
10
FrancescoMussi

ご覧のとおり ここ 、次のようにside="left"とside="right"を追加する必要があります。

<ion-menu [content]="content" side="left" id="menu1">...</ion-menu>

そして

<ion-menu [content]="content" side="right" id="menu2">...</ion-menu>

編集：

コメントありがとうございます@ johnnyfittizio！そこでおっしゃった変更を加えました（何か忘れた場合は、この回答を編集してください）。

したがって、基本的には、次のように両方のメニューを追加する必要があります（たとえば、app.htmlページ）。

<ion-menu [content]="content" side="left" id="menu1">
  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu1" detail-none>
        Close Menu 1
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-menu [content]="content" side="right" id="menu2">
  <ion-content>
    <ion-list>
      <button ion-item  menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>
</ion-menu>



<ion-nav [root]="rootPage" #content></ion-nav>

次に、次のようにヘッダーに両方のメニューボタンを追加する必要があります。

<ion-header>
  <ion-navbar primary>
    <button ion-button menuToggle="left" start>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      HomePage
    </ion-title>
    <button ion-button menuToggle="right" end>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>Home page</p>

</ion-content>

適切なメニューを切り替えることができるように、各ボタンにはmenuToggle="left"またはmenuToggle="right"プロパティがあることに注意してください。

17
sebaferreras