Angular 2继承启用禁用离子菜单滑动 [英] Angular 2 Inheritance to enable disable Ionic Menu Swipe

问题描述

My problem:

My application contains a menu which is swipe enabled. On login screen if I swipe I can see the menu which is not right. I want to disable menu swipe for pages that doesn't contains menu icon, like login, inner details pages containing back button, etc.

Solution found:

I am able to do that by following the SO link - https://stackoverflow.com/a/38654644/2193918

I created a base class and injected a menu object in it. Override ionViewDidEnter() and ionViewDidLeave() In sub class, I inherited the base class. I have to write super() call in derived class constructor and pass the menu object back to the super class.

Is their any other way of doing it as with this way I will have to do this in every single page.

Please check the snippet of code as below:

Base class

import { MenuController } from "ionic-angular";

export class BaseComponent {
    constructor(public menu: MenuController) {

    }

    ionViewDidEnter() {
        this.menu.swipeEnable(false);
    }

    ionViewDidLeave() {
        this.menu.swipeEnable(true);
    }
}

Derived class

import { Component } from '@angular/core';
import { NavController, LoadingController, Events, MenuController } from 'ionic-angular';


@Component({
        selector: 'login',
        templateUrl: 'login.component.html'
    })

export class login extends BaseComponent {
    constructor(public menu: MenuController) {
        super(menu)
    }
}

解决方案

Even though what @trichetriche says is true, there's a better way to handle this in Ionic! The answer is Custom decorators.

Github repo with working demo.

---

First, you'll need to go to the app.module.ts file and replace this line

export class AppModule { }

by this:

export class AppModule {

    static injector: Injector;

    constructor(injector: Injector) {    
        // Make the injector to be available in the entire module
        AppModule.injector = injector;    
    }
}

Doing that will help us to inject the instance of the MenuController in our custom decorator.

We're now able to write our custom decorator. I've created a folder named CustomDecorators and a file inside, disable-side-menu.decorator.ts with this content (I think the code is pretty self-explanatory):

// Angular
import { AppModule } from "../path/to.../app.module";

// Ionic
import { MenuController } from "ionic-angular";

export function DisableSideMenu() {

    return function (constructor) {
        const originalDidEnter = constructor.prototype.ionViewDidEnter;
        const originalWillLeave = constructor.prototype.ionViewWillLeave;            

        constructor.prototype.ionViewDidEnter = function () {

            // Get the MenuController instance
            const menuCtrl = AppModule.injector.get(MenuController);

            // Disable the side menu when entering in the page
            menuCtrl.enable(false);

            console.log('Disabling side menu...');

            // Call the ionViewDidEnter event defined in the page
            originalDidEnter && typeof originalDidEnter === 'function' && originalDidEnter.apply(this, arguments);
        };

        constructor.prototype.ionViewWillLeave = function () {

            // Get the MenuController instance
            const menuCtrl = AppModule.injector.get(MenuController);

            // Enable the side menu when leaving the page
            menuCtrl.enable(true);

            console.log('Enabling side menu...');

            // Call the ionViewWillLeave event defined in the page
            originalWillLeave && typeof originalWillLeave === 'function' && originalWillLeave.apply(this, arguments);
        };
    }

}

That's it! If you want to disable the side menu in a particular page, you'd need to add our custom decorator like this:

import { DisableSideMenu } from '../the/path/to../custom-decorators/disable-side-menu.decorator';

@DisableSideMenu()
@Component({
    selector: 'page-demo-page',
    templateUrl: 'demo-page.html'
})
...

So you don't need to extend any BaseClass nor inject anything else, making this extremely easy to be reused.

这篇关于Angular 2继承启用禁用离子菜单滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！