Ionic 2複数のページの複数のメニューが機能しない

Question

Ionic 2にタブ付きのアプリケーションを構築しています。このタブには5つのタブがあります。タブは正常に動作します。ホームページ以外のタブページごとにメニューを追加しようとしています。私は複製し、ホームページの4つのページのそれぞれについて、以下のコードをメニューIDとコンテンツIDだけを変更するだけで追加しました。最初のページはすべて正常に動作します。後続のページにアクセスします。何もアクセスしません。私はこれがとてもシンプルだと思っていましたが、すでに解決策を探していました。ドキュメントは、複数ページの異なるメニューではなく、1ページの異なるメニューを参照するだけです。初心者はとてもシンプルだと思います。助けてください。

<ion-header> 
<ion-navbar color="dark"> 
    <button ion-button menuToggle="menujoinus"> 
    <ion-icon name="menu"></ion-icon> 
</button> 
<ion-title>JOIN US</ion-title> 
</ion-navbar> 
</ion-header> 

<ion-menu [content]="joinuscontent" id="menujoinus"> 
<ion-content> 
<ion-list> 
    <button ion-button block icon-right color="secondary" menuClose="menujoinus">Close 
    <ion-icon name="close"></ion-icon> 
    </button> 
    <button ion-item icon-left (click)="openPageFieldguides()"> 
     <ion-icon name="compass"></ion-icon> 
     Field Guides 
    </button> 
    <button ion-item icon-left (click)="openPageVolunteers()"> 
     <ion-icon name="clipboard"></ion-icon> 
     Volunteers 
    </button> 
    <button ion-item icon-left (click)="openPageOwner()"> 
     <ion-icon name="key"></ion-icon> 
     Owners 
    </button> 
    </ion-list> 
    </ion-content> 
    </ion-menu> 
    <ion-nav #joinuscontent [root]="rootPage"></ion-nav> 

Answer 1

それは少し混乱だが、あなたはアプリのコンポーネントにすべてのメニューを追加する必要がある - サブページのいずれかをない - そして、あなたはMenuControllerを使用して、サブページから必要な方参照します。場合によっては、サブページでメニューを無効/有効にする必要がありますが、状況によって異なります。詳細については、http://ionicframework.com/docs/api/components/app/MenuController/と「同じ側の複数のメニュー」と「複数の異なるメニュー」を参照してください。

例：

<!-- Menu 1 --> 
<ion-menu id="menu-one" [content]="nav"> 
    <ion-header> 
    <ion-navbar> 
     <ion-title>Menu 1</ion-title> 
    </ion-navbar> 
    </ion-header> 
    <ion-content> 
    <ion-list> 
     <ion-item (click)="doSomething()" menuClose> 
     Item 1 
     </ion-item> 
     <ion-item (click)="doSomething()" menuClose> 
     Item 2 
     </ion-item> 
    </ion-list> 
    </ion-content> 
</ion-menu> 

<!-- Menu 2 --> 
<ion-menu id="menu-two" [content]="nav"> 
    <ion-header> 
    <ion-navbar> 
     <ion-title>Menu 2</ion-title> 
    </ion-navbar> 
    </ion-header> 
    <ion-content> 
    <ion-list> 
     <ion-item (click)="doSomething()" menuClose> 
     Item 1 
     </ion-item> 
     <ion-item (click)="doSomething()" menuClose> 
     Item 2 
     </ion-item> 
    </ion-list> 
    </ion-content> 
</ion-menu> 
<ion-nav #nav [root]="rootPage"></ion-nav> 

とサブページで：

import { Component } from '@angular/core'; 
import { MenuController } from 'ionic-angular'; 

@Component({ 
    selector: 'sub-page', 
    templateUrl: 'sub-page.html' 
}) 
export class SubPage { 

    constructor(public menuCtrl: MenuController) { 
    // menuCtrl.enable(false, 'menu-one'); 
    menuCtrl.enable(true, 'menu-two');  
    } 

    toggleMenu() { 
    this.menuCtrl.toggle(); 
    } 
} 

落とし穴はのdoSomething（）メソッドは、アプリケーションの構成要素ではなく、サブ・ページ・コンポーネントであることが必要です。