Ioinc进出栈解析

Ionic

Ionic进阶知识整理

$state.go 和 $ionicHistory.goback 返回时的具体区别

注明：下面两种演示情况的A,B,C,D页面均为一级页面，也就是不含有<ion-nav-view>页面。复杂页面（abstract：true)的go和goBack情况参见结论。

1. 跨页面数量为0时（也就是两个相邻的页面返回时)

Demo：

解析：

结论：
当相邻的两个页面返回时:
如果返回的页面为一级页面：go和goBack无区别，都只改变cursor的值。
如果返回的页面为复杂页面：go和goBack无区别， cursor之后的页面都会销毁掉。

2. 跨页面数量为1个以上时（最少间隔一个）

Demo:

解析：

附加情况：此时处于B页面，如果要跳转到G时，也就是B->G时
第一种情况下：

第二种情况下：

结论：
当跨页面返回时:
如果返回的页面为一级页面：go向堆栈的末尾添加视图（堆栈视图增加），goBack会更改cursor的值（堆栈视图不变）
如果返回的页面为复杂页面：go向堆栈的末尾添加视图（堆栈视图增加），goBack会更改cursor的值（cursor之后的视图会销毁）

$ionicHistory对象的histories堆栈中页面何时销毁

情况1： A,B,C,D页面均为一级页面，也就是都不包含有标签的页面。

Demo:

调用goback(-3)或调用go一级一级返回到A时,

下面分三种情况：
情况1：

情况2：

情况3：

结论：
返回的页面为一级页面，这时cursor不是堆栈的末尾时：
如果这时跳转go到不是当前页面的下一个页面时，就会产生新的页面，且原cursor之后的页面都会销毁
如果这时跳转go到当前页面的下一个页面时，不产生新的页面，cursor增加1，堆栈视图信息不变

情况2： A页面为复杂页面，abstract为true,且内部包含有标签， 而 B,C,D页面均为一级页面。

Demo：

调用goback(-3)或调用go一级一级返回到A(A1)时

注意：这里和情况1不一样

结论：
返回的页面为复杂页面时，cursor之后的页面都会被销毁

情况3：state.go 和 goback 返回时传递参数的问题

调用方法：

#Method1
state.go(state,params)
#Method2
$ionicHistory.backView().stateParams = {card:true};
$ionicHistory.goBack();

注意： 这时不管是跨页面数量为0还是跨页面数量为1个以上时（最少间隔一个）都会在堆栈中产生新的view，为什么？？？？？？？

具体原因:由于stateParams，因为它的改变导致$ionicHistory产生的card=null的页面stateID和card=true的页面stateID不一致，所以会产生一个新的View加入堆栈中，不再是之前我们分析的goBack一定不会产生新的View的问题

情况1：state.go(B,{test:1})

情况2：$ionicHistory.backView().stateParams ={card:true};$ionicHistory.goBack();

情况3：state.go(B) 或 $ionicHistory.goBack()

注意:C页面没有传递参数到B页面，不符合我们的要求

解决方法，使用service：
service.data={test:1}, 这样才能完美解决该问题

结论：
情况1和情况2，都会出现死循环问题，所以带有参数的页面跳转，只能使用服务的形式去传递参数