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 with working demo.

首先，您需要转到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

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

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

2 个答案:

的 Github repo with working demo.