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

推荐答案

尽管@trichetriche说的是真的，但是有一种更好的方法来处理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屋！