Angular 2 Inheritance启用禁用离子菜单滑动

Question

我的问题:

我的应用程序包含一个启用滑动的菜单.在登录屏幕上,如果我滑动,我可以看到不正确的菜单.我想对不包含菜单图标的页面禁用菜单滑动,例如登录,包含后退按钮的内部详细信息页面等.

解决方案:

我可以通过关注SO链接来做到这一点 - /sf/answers/2705825111/

我创建了一个基类并在其中注入了一个菜单对象.覆盖ionViewDidEnter()和ionViewDidLeave()在子类中,我继承了基类.我必须super()在派生类构造函数中编写调用,并将菜单对象传递回超类.

是他们用这种方式做任何其他方式我必须在每一页都这样做.

请检查以下代码片段:

基类

import { MenuController } from "ionic-angular";

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

    }

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

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

派生类

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

尽管@trichetriche说的是真的,但是有一种更好的方法来处理Ionic!答案是自定义装饰器.

Github回购与工作演示.

首先,您需要转到该app.module.ts文件并替换此行

export class AppModule { }

这样:

export class AppModule {

    static injector: Injector;

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

这样做有助于我们MenuController在自定义装饰器中注入实例.

我们现在能够编写我们的自定义装饰器.我已经创建了一个名为CustomDecorators的文件夹和一个文件,里面disable-side-menu.decorator.ts有这个内容(我认为代码非常明显):

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

}

而已!如果要禁用特定页面中的侧边菜单,则需要添加我们的自定义装饰器,如下所示:

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

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

所以你不需要扩展任何BaseClass东西,也不需要注入任何其他东西,这使得它非常容易被重用.