export class MyClass{
constructor(
public navCtrl: NavController
){}
pushPage(){
this.navCtrl.push(DetailPage);
}
ionViewCanLeave(): boolean{
// here we can either return true or false
// depending on if we want to leave this view
if(isValid(randomValue)){
return true;
} else {
return false;
}
}
}
5条答案
按热度按时间pxy2qtax1#
使用
IonBackButtonDelegate
覆盖该功能。iszxjhcz2#
这可以通过离子生命周期挂钩完成
离子视图ID加载:仅当视图存储在内存中时触发。此事件不会在进入已缓存的视图时触发。这是初始化相关任务的好地方。ionViewWillEnter:当进入一个页面时,在它成为活动页面之前,它被触发。使用它来完成每次进入视图时要执行的任务(设置事件监听器,更新表格等)。
离子视图ID输入:当进入一个页面时,在该页面成为活动页面后触发。与前一个非常相似。
离子视图将离开:当您离开页面时,在它停止为使用中页面之前引发。使用它来行程每次离开页面时需要执行的事情(停用事件侦听程式等)。
离子视图未离开:当您离开一个页面时引发,在该页面不再是活动页面之后。与上一个类似。
ionView将卸载:当要完全删除视图时激发(在离开非缓存视图后)。
作为奖金轨道,有两个其他强大的方法与这些事件:这些方法主要用于视图访问控制(用于身份验证)。
导航防护如果要阻止用户离开视图:
离子视图可以输入:在进入视图之前激发,允许您控制是否可以访问视图(返回true或false)。
离子视图可以离开:在离开视图之前触发,允许您控制是否可以离开视图。
需要强调的是,导航保护在任何其他生命周期事件方法之前执行。
fcwjkofz3#
我找不到一个只有控制器的解决方案(ionViewCanLeave没有触发)--我目前的破解方法如下。它有条件地阻止/覆盖ion-back-button,同时仍然在单击时激活按钮。
于飞:
SCSS:
技术支持:
lyr7nygr4#
还有另一种替代方法,可能会使用Angular 事件产生更多
natural
解决方案:)我们所需要做的就是创建一个
Directive
,它使用@Host
和IonBackButtonDelegate
来覆盖内置的ionicion-back-button
指令本身,如果有任何观察者在监听它,则触发一个新的backClicked: InterceptedEvent
。从技术上讲,我们不需要触发自定义事件/类型,我们可以只触发事件本身,然后在执行单击处理程序之前检查
event.defaultPrevented
,但是......下面的方法通过回调模式支持async
事件侦听器。当然,您需要确保在您的模块中正确地注册了此内容。
您的消费代码将需要使用新的
(backClicked)
事件:如果你想让后退按钮执行它原来的工作,你需要调用
InterceptedEvent.proceed()
:一切都是类型安全的,不需要使用其他离子生命周期事件。
还有很多其他的方法来构造事件,比如使用
event.preventDefault()
本身来避免调用proceed()
,但是回调方法支持我所需要的大多数用例,比如async
方法等等。我肯定有更干净的方法。感谢反馈!
pexxcrt25#
试试这个:
于飞:
技术支持: