web-dev-qa-db-ja.com

Ionic 4でメニューを切り替える方法

私はIonicを初めて使用し、Ionic 4 with sidemenuで基本的なアプリを開発しています。

サイドメニューにボタンを追加しています、そのボタンをクリックしてもメニューは切り替わりません。誰でもこれで私を助けることができますか？ここに私が試しているコードがあります。

<ion-button color="primary" (click)="function()" class="class" menuToggle expand="block" fill="outline"> text </ion-button>

重複しない質問の説明

太字のテキストを確認してください。既に機能するサイドメニューがありますが、問題はion-buttonではなくion-itemをクリックしたときにサイドメニューを閉じたいということです。

ionic-frameworkionic4
9
Riot Zeast Captain

ion-buttonエレメント内にion-menu-toggleを単純にカプセル化します。

<ion-menu-toggle>
  <ion-button>Toggle Menu</ion-button>
</ion-menu-toggle>

ドキュメントはこちら

EDIT：ion-menu-toggleを使用したくない場合は、代わりにこれを行うことができます：

App.component.tsで：

import { MenuController } from '@ionic/angular'; //import MenuController to access toggle() method.

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    public menuCtrl: MenuController
  ) {
    this.initializeApp();
  }

toggleMenu() {
    this.menuCtrl.toggle(); //Add this method to your button click function
  }

}

そして、あなたのapp.component.htmlで：

<ion-button (click)="toggleMenu()">Toggle Menu</ion-button>

すべてのメソッドを表示するには、 こちらのドキュメントを確認してください 。

15
NickyTheWrench