4

Ionic2 サイド メニューの使用方法を学習しようとしていますが、子ビューごとに個別のサイド メニューを使用できるかどうかを確認したいと考えています。

メインアプリケーション、つまりapp.html私たちが持っているブートストラップファイルにイオンメニューがある入門アプリの1つをインストールしました

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

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

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

</ion-menu>

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

次に、独自のページgetting-started.tsを追加し、サンプル アプリの最初のルート ページに次を追加して、新しいページに移動します。

public goToSideMenuPage(): void{    
   this._navController.push(SideMenuPage);

上記のハンドラを呼び出すボタンも追加します。

SideMenuPage には、独自のまったく別のサイド メニューが必要です。私は次のことを試しました...

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

<ion-content>
 <ion-list>
    <button>button1</button>
    <button>button2</button>
 </ion-list>
 </ion-content>
</ion-menu>

<ion-content #thecontent>
  <div>Main contents text</div>
 </ion-content>

ただし、自分のページに移動するとMain contents text、左上隅にしか表示されません。メニュー ハンバーガー アイコンが表示されません。右にドラッグすると、アプリのメイン メニューが で設定されているように表示されapp.htmlます。

<button>button1</button>
<button>button2</button>

doco found hereでは、デモではサイド メニューが実行時にスワップされることが示されていますが、実際のコードはどこにもありません。これは私がやりたいことに近いです（ただし、ナビゲートする子ページに応じて交換したいのですが）、それが可能であるように見えますが、どうすればよいかわかりませんそれをしている。

これが可能かどうかを知っている人はいますか？

4

2 に答える 2

8

探している情報は、Ionic2 ドキュメントのMenuControllerセクションにあります。これは、にメニューを追加することで実行できますがapp.html、次のように ID を割り当てます。

<ion-menu [content]="content" side="left" id="menu1">
  <ion-toolbar secondary>
    <ion-title>Menu 1</ion-title>
  </ion-toolbar>
  <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-toolbar danger>
    <ion-title>Menu 2</ion-title>
  </ion-toolbar>
  <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>

そして、各ページで、次のようにアクティブにするメニューを決定できます。

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

  ionViewDidEnter() {
    // Use the id to enable/disable the menus
    this.menu.enable(true, 'menu1');
    this.menu.enable(false, 'menu2');
  }

this.nav.setRoot(Page1);また、のようなものを使用する代わりに を使用して 2 ページ目を表示していることに注意してくださいthis.nav.push(Page1);。

編集: 両方のメニューを同時にアクティブにしたい場合は、この回答をご覧ください。

編集2：@petercがコメントで言うように：

ページ sidemenu-page.html にサイドメニューがあり、 this.menu.enable(true, 'menu1'); を設定すると、これも機能することがわかりました。それはコンポーネントです（そのため、それに切り替えるページのマークアップをサイドメニューに表示するオプションがあります）。

それが使用されるビューは、app.html.

于 2016-07-25T15:39:25.103 に答える
1

@ user623396のために@ sebaferrerasによって提供された情報の一部としてこれを追加するだけです

実際のビューでサイドメニューを表示するには、次のようにしました...

    <ion-menu [content]="thecontent" id='menu1'>
      <ion-toolbar>
        <ion-title>Title</ion-title>
      </ion-toolbar>

      <ion-content>
        <ion-list>
          <button>button1</button>
          <button>button2</button>      
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-navbar *navbar>
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Getting Started</ion-title>
    </ion-navbar>

    <ion-content #thecontent>
      <div>Some text</div>  
    </ion-content>

そして、コンポーネントファイルで

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

    // Use the pipe TranslatePipe to use in the markup
    @Component({
      templateUrl: 'build/pages/sidemenu-page/sidemenu-page.html'
    })
    export class SideMenuPage {
      public rootPage = SideMenuPage;

      public myVal: string;  

      constructor(private menu: MenuController, private nav: NavController, private tranlate: TranslateService){
      }

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

これが Ionic の最新バージョンでも正しいことを願っています (この例を見てからしばらく経ちました)。

于 2016-11-22T00:45:43.530 に答える