我的问题:
我的应用程序包含一个启用了滑动功能的菜单。在登录屏幕上,如果我滑动,我可以看到不正确的菜单。我想对不包含菜单图标的页面禁用菜单滑动,例如登录,包含后退按钮的内部详细信息页面等。
找到解决方案:
我可以通过关注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)
}
}
答案 0 :(得分:11)
尽管@trichetriche说的是真的,但是在Ionic中处理这个问题的方法更好!答案是自定义装饰器。
首先,您需要转到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
也不需要注入任何其他东西,这使得它非常容易被重用。
答案 1 :(得分:1)
简短回答:不。继承一个类意味着你必须在构造函数中调用super。如果你不想这样做,那么你需要找到另一种方法。