ionic 中的侧边菜单自动打开加载时间问题

Question

我在我的应用程序中使用离子菜单组件。我改变它基于路线。所以我修改了它。对于前者如下。

My issue is first time menu clicked & the app load next that menu related view time the side menu was close correctly but reopened next few second.

我的approutemodule.ts

[{
    path: '',
    canActivate: [AuthGuard],
    component: SideMenuComponent,
    children: [{
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
    }, {
        path: 'dashboard',
        loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule'
    }, {
        path: 'tabs-view',
        loadChildren: './layouts/footer-tabs/footer-tabs.module#FooterTabsPageModule'
    }]
}, {
    path: 'login',
    loadChildren: './pages/login/login.module#LoginPageModule'
}];

我的appcomponent.html

<ion-app>
    <ion-router-outlet></ion-router-outlet>
</ion-app>

我的sidemenucomponent.html

<ion-split-pane>
    <ion-menu id="app-side-manu" #sideMenu>
        <ion-header class="user-img">
            <ion-toolbar>
                <ion-avatar>
                    <img *ngIf="userImg" [src]="userImg" alt="user-img" />
                </ion-avatar>
                <div>
                    <h2>{{userName}}</h2>
                    <p>{{userLoc}}</p>
                </div>
            </ion-toolbar>
        </ion-header>

        <ion-content class="side-menu">
            <ion-list>
                <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
                    <ion-item lines="none" class="link-hover" routerDirection="root" [routerLink]="p.url">
                        <ion-thumbnail slot="start">
                            <ion-img [src]="p.icon"></ion-img>
                        </ion-thumbnail>
                        <ion-label>
                            {{p.title}}
                        </ion-label>
                    </ion-item>
                </ion-menu-toggle>
                <ion-menu-toggle auto-hide="false" >
                    <ion-item lines="none" class="link-hover" (click)="globalHelper.logout()">
                        <ion-thumbnail slot="start">
                            <ion-img src="/assets/images/logout.png"></ion-img>
                        </ion-thumbnail>
                        <ion-label>Logout</ion-label>
                    </ion-item>
                </ion-menu-toggle>
            </ion-list>
        </ion-content>

    </ion-menu>

    <ion-router-outlet main></ion-router-outlet>
</ion-split-pane>

Answer 1

在您的应用程序组件 html 文件中使用侧边菜单组件选择器。

例如：

<ion-app>
    <app-sidemenu-component></app-sidemenu-component>
</ion-app>

如果你想显示侧边菜单隐藏不同的屏幕。这是可能的。例如：

home screen is need to side-menu

// first import MenuController in your home screen

import { MenuController } from '@ionic/angular';

// Next add that constructor to assign private variable menuCtrl

constructor(private menuCtrl: MenuController){}

// then use it ionViewWillEnter method inside

ionViewWillEnter() {
    this.menuCtrl.enable(true);
}

login screen is no need to side-menu

ionViewWillEnter() {
    this.menuCtrl.enable(false);
}

ionic 中的侧边菜单自动打开加载时间问题

Side-menu auto open loading time issue in ionic

router

side-menu

ionic4