Question

我是Ionic的新手，并试图在会议应用中使用菜单和标签。看起来很简单，但抽屉里的按钮不起作用。

app.template.html

<ion-menu [content]="mycontent" persistent="true">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="outer-content">
    <ion-list>
      <button ion-item menuClose>
        <ion-icon item-left name="person" (click)="goToUserInfo()"></ion-icon>
        My information
      </button>
      <button ion-item menuClose>
        <ion-icon item-left name="log-out" (click)="logOut()"></ion-icon>
        Log out
      </button>
      <button ion-item menuClose>
        <ion-icon item-left name="hammer" (click)="goToTutorial()"></ion-icon>
        Show tutorial again
      </button>
    </ion-list>
  </ion-content>
</ion-menu>


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

app.component.ts

@Component({
  templateUrl: `app.template.html`
})
export class MyApp {
  rootPage: any = DummyPage;
  @ViewChild(Nav) nav: Nav;

  constructor(public platform: Platform) {
    console.log('Hello from MyApp');
    this.initializeApp();


    }
\\
\\
\\
  goToUserInfo() {
    console.log(this.TAG + ' goToUserInfo');
    // this.navCtrl.push();
    this.nav.setRoot(UserInfoPage);
  }

  logOut() {
    console.log(this.TAG + ' logOut');
    // this.userData.logout();
    this.nav.setRoot(LoginPage);
  }

  goToTutorial() {
    console.log(this.TAG + ' goToTutorial');
    // this.navCtrl.push();
  }
}

但我不确定为什么单击菜单中的选项不会触发点击事件

Answer 1

您应该将点击事件处理程序移动到按钮元素，因为似乎有几个人在使用该问题时遇到了问题：https://forum.ionicframework.com/t/ionic2-clickable-ion-icon/46512

像这样使用：

<button ion-item menuClose (click)="goToUserInfo()">
  <ion-icon item-left name="person" ></ion-icon>
    My information
</button>

在Ionic 2中使用菜单的正确方法

1 个答案: