Question

我可以构建side menu，但我不确定如何将其链接到不同的页面，请帮助我这方面

这是demo：https://stackblitz.com/edit/ionic-lkxqz6?file=pages%2Fhome%2Fhome.html

问题：我想显示menus onclick和menu

ProfilePage PostPage >

<ion-header>

</ion-header>

<ion-content padding>

<button ion-button menuToggle icon-only class="menuButton"> 
  <ion-icon name="menu"></ion-icon>
</button>

<ion-menu [content]="mycontent">
  <ion-content>
    <ion-list>
      <p>some menu content, could be list items</p>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #mycontent type="overlay"></ion-nav> 

</ion-content>

这是demo：https://stackblitz.com/edit/ionic-lkxqz6?file=pages%2Fhome%2Fhome.html

Answer 1

您可以使用NavController https://ionicframework.com/docs/api/navigation/NavController/

点击导航菜单中的按钮，您可以使用NavContoller推送页面。

步骤1：在组件中注入导航控制器

import { NavController } from 'ionic-angular';

class MyComponent {
  constructor(public navCtrl: NavController) {

  }
}

第2步：在菜单中创建点击事件。

 <ion-menu [content]="content">
  <ion-content>
    <ion-list>
      <button menuClose ion-item (click)="openProfilePage()">
        Profile
      </button>

岗位

步骤3：在控制器功能中按下新页面

   openProfilePage() {

      this.nav.push(ProfilePage);
   }

  openPostPage() {

          this.nav.push(PostPage);
  }

如何在离子3中显示侧面菜单项

1 个答案: