Angular 2 Inheritance to enable disable Ionic Menu Swipe

Question

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)
    }
}

Answer 1

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.

Answer 2

Short answer : no. Inheriting a class implies that you have to call super in your constructor. If you don't want to do that, then you need to find another way of doing this.