离子中的侧面菜单自动打开加载时间问题答案

【问题标题】：Side-menu auto open loading time issue in ionic离子中的侧面菜单自动打开加载时间问题
【发布时间】：2019-08-26 08:37:41
【问题描述】：

我在我的应用程序中使用了 ion-menu 组件。我改变它基于路线。所以我修改了那个。例如下面。

我的问题是第一次点击菜单和该菜单旁边的应用程序加载相关查看时间侧边菜单正确关闭但在接下来的几秒钟内重新打开。

我的 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>

【问题讨论】：

标签： router ionic4 side-menu

【解决方案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);
}

【讨论】：