Ionic 4プロジェクトで、サイドメニューを使用しています。メニューを開くメニューボタンがあります。メニューには、メニューを選択すると、メニューの選択肢のリストがあります。選択するとサイドメニューが閉じます。これはブラウザでは機能しますが、デバイスでは機能しません。メニューは開きますが閉じません。
サイドメニューはapp.component.htmlにあります
<ion-app>
<ion-menu side="start" type="Push" contentId="content1">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="light-grey">
<ion-list>
<ion-item (click)="toggleMenu()" [routerLink]="['/home']" routerLinkActive="active-link">Home</ion-item>
<ion-item (click)="toggleMenu()" [routerLink]="['/dashboard']" routerLinkActive="active-link">Dashboard</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>
ホームページのサンプルはこちら
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button autoHide="false" menuToggle></ion-menu-button>
</ion-buttons>
<ion-title>
Opportunity Forms
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="ionRefresh($event)" >
<ion-refresher-content
pulling-icon="arrow-dropdown"
pulling-text="Pull to refresh"
refreshing-spinner="circles"
refreshing-text="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<ion-card>
<ion-card-content>
</ion-card-content>
</ion-card>
</ion-content>
これがアプリのスクリーンショットです
Chromeテスト済みのバージョン77.0.3865.90で動作し、メニューが閉じないAndroid 9
どんな助けにも感謝します、うまくいけば私は十分な情報を提供しました。
-編集(app.component.tsを追加)-
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import {MenuController} from '@ionic/angular';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private menu: MenuController,
private route: Router
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
toggleMenu() {
this.menu.toggle(); //Add this method to your button click function
}
}
こちらをご覧ください。問題について説明します: https://github.com/ionic-team/ionic/issues/19354
彼らは@ ionic/angularを4.11.2に更新することを提案しています。それは誰にとってもうまくいったわけではありませんが、誰かのために働いた別の提案された解決策は次のとおりです:
<ion-menu-toggle menu="first" autoHide="false">
次のコードを試してみてください:
_<ion-app>
<ion-menu side="start" type="Push" contentId="content1">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="light-grey">
<ion-list>
<ion-item (click)="toggleMenu()" [routerLink]="['/home']" routerLinkActive="active-link">Home</ion-item>
<ion-item (click)="toggleMenu()" [routerLink]="['/dashboard']" routerLinkActive="active-link">Dashboard</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>
_
2つの可能な方法が混在しています。 1つの方法は、HTMLに_ion-menu-toggle
_を追加することです。別の方法は、_app.component.ts
_にトグルメソッドを追加し、_app.component.html
_にクリックイベントを追加することです。 _app.component.ts
_にtoggle methodをすでに追加していますが、itemsにclick eventを追加していません_app.component.html
_ ..