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

问题描述

我的问题:

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

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.

找到解决方案:

我可以通过遵循 SO 链接来做到这一点 - https://stackoverflow.com/a/38654644/2193918

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

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

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.

请检查以下代码片段:

基类

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

推荐答案

即使@trichetrice 所说的是正确的，在 Ionic 中有更好的方法来处理这个问题！答案是自定义装饰器.

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

首先，您需要转到 app.module.ts 文件并替换这一行

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

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 的实例.

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

我们现在可以编写自定义装饰器了.我已经创建了一个名为 CustomDecorators 的文件夹和一个包含此内容的文件 disable-side-menu.decorator.ts (我认为代码是不言自明的):

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

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

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

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