【メモ】ion-menu に配置した ion-item に button を指定しても反応しない

最近また Ionic を触りだしたのですが、その中で詰まったことがあったので小まめに公開していきたいと思います。 Ionic を触りだした人の役に立てば幸いです（もちろんそれ以外の人にも）。

結論

<ion-menu> に指定する contentId はその <ion-menu> 内にあるコンテンツのIDを指定してはいけない

発生した問題

f:id:pickles-ochazuke:20210912214727p:plain

メニューを横から出して遷移したいページに飛べるようなメニューを作りたくて、以下のような HTML を書きました。クリックの内容は仮実装でコンソールログを出力するだけです。

<ion-app>
  <ion-menu contentId="main">
    <ion-content id="main">
      <ion-item button (click)="onClick()">
        <ion-icon name="home"></ion-icon>
        <ion-label>Home</ion-label>
      </ion-item>
    </ion-content>
  </ion-menu>

  <ion-router-outlet id="main"></ion-router-outlet>
</ion-app>

ですが、 <ion-item> をクリックしても何も反応しません。

解決方法

<ion-menu> 内にある <ion-content id="main"> の id="main" を削除するか、別の ID に変更します。つまり、以下のようになります。

<ion-app>
  <ion-menu contentId="main">
    <ion-content>
      <ion-item button (click)="onClick()">
        <ion-icon name="home"></ion-icon>
        <ion-label>Home</ion-label>
      </ion-item>
    </ion-content>
  </ion-menu>

  <ion-router-outlet id="main"></ion-router-outlet>
</ion-app>

※手探りで要素を見て自分なりに解釈したので、今から説明するのは正しい説明ではないかもしれないです。

<ion-menu> は contentId に指定したコンテンツを対象に表示するため、指定するのが必須なのですが、<ion-menu> 内のコンテンツ（今回だと <ion-content>）にするとメニュー（というよりメニューを構成する一部の要素）がその上に表示されるような感じになってしまうため、<ion-item> がクリック出来なくなるようです。

解決策としては、<ion-menu> 内のコンテンツの ID を指定せずに、正しいコンテンツの ID を指定する。です。意図的にしていたわけではなかったのでただの凡ミスなのですが、この経験で少し Ionic を理解した気になりました。