Angular 2继承以启用禁用离子菜单滑动

Question

我的问题：

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

找到解决方案：

我可以通过遵循SO链接-https：//stackoverflow.com/a/38654644/2193918

来做到这一点。

我创建了一个基类，并在其中注入了菜单对象。覆盖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 repo与工作演示。

---

首先，您需要转到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，也不需要注入其他任何内容，因此非常容易重复使用。

Answer 2

简短答案： no 。继承一类意味着您必须在构造函数中调用超级。如果您不想这样做，那么您需要找到另一种方法。