时间戳

首页 > 解决方案 > 离子中的侧面菜单自动打开加载时间问题

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

问题描述

我在我的应用程序中使用了 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>

标签： routerionic4side-menu

解决方案

在您的应用组件 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);
}

推荐阅读