Ionic2各タブの1つのサイドメニューは同じサイドメニューを開きます

Question

私のionic2アプリでは、それぞれのタブごとに1つのサイドメニューがあります。ここで私は試してみました。私はionic start appname tabs --v2を使って基本構造を作成しました。

私の考えはhome.htmlとcontact.html（ionic cliで作成）の両方にページを含むサイドメニューを作ることでした。

：私は、両方を以下のように、独自のrootpageを含むようにファイル（home.tsとcontact.ts）をtsは変更

<ion-menu [content]="content"> 
    <ion-header> 
    <ion-toolbar> 
     <ion-title>Menu</ion-title> 
    </ion-toolbar> 
    </ion-header> 

    <ion-content> 
    <ion-list> 
     <button menuClose ion-item (click)="openPage(p)"> 
     Page 1 
     </button> 
     <button menuClose ion-item (click)="openPage(p)"> 
     Page 2 
     </button> 
    </ion-list> 
    </ion-content> 

</ion-menu> 

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

：だから私は以下のようにフォルダページにhome.htmlとcontact.htmlの両方を変更しました

<ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Home Root</ion-title> 
    </ion-navbar> 

0：

rootPage: any = HomeRootPage; // for home.ts 

と私のHomeRootPageで

rootPage: any = ContactRootPage; // for contact.ts 

、私は、ナビゲーションバー以下のように持っています私はその後、ionic serveを走った

<ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Contact Root</ion-title> 
    </ion-navbar> 

：

と私ContactRootPage。はい、私は各タブごとに1つのサイドメニューを作成しました！ （自宅と連絡先）。

ホームルートページのサイドメニューを切り替えることはできますが、コンタクトルートページのサイドメニューは機能しません。連絡先のサイドメニューを開く代わりに、ホームのサイドメニューを開きます。 （両方ともmenuToggleは同じサイドメニューを開きます）

その理由を知っていますか？ menuToggleコマンドで自分のサイドメニューを切り替えることはできますか？

ご協力いただきありがとうございます。 :-)

Answer 1

自分のメニューの[トグル]コマンドで自分のサイドメニューを切り替えることはできますか？ menuToggle ディレクティブに値を与え、そのIDまたは側面により特定メニューを切り替える

：Ionic Docsから

。

<button ion-button menuToggle="right">Toggle Right Menu</button>

ですから、このように、各メニューにidを設定することで試すことができます：あなたのページで

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

と

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

そして：

<ion-navbar> 
    <button ion-button menuToggle="home"> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Home Root</ion-title> 
    </ion-navbar> 

そして

<ion-navbar> 
    <button ion-button menuToggle="contact"> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Contact Root</ion-title> 
    </ion-navbar> 

それが正常に動作しない、またはあなたがスワイプするとき、間違ったメニューが表示されていることを見れば、あなたは、コンポーネントのコードでそれを行うことができる場合：

constructor(private menuCtrl: MenuController, private nav: NavController) { } 

    ionViewDidEnter() { 
    // Use the id to enable/disable the menus 
    this.menuCtrl.enable(true, 'home'); 
    this.menuCtrl.enable(false, 'contact'); 
    }