离子历史是如何工作的,何时创build非根堆栈?
我正在使用离子 v1.0.0,不明白由$ionicHistory
pipe理的平行历史的作品。
特别是在Android设备上,当使用(以前称为硬件)后退button时,我的Angular应用程序有时performance得很奇怪,我想了解原因。 (例如:导航返回打开由$ionicGoBack()
很久以前closures的视图)
对我来说,似乎某些UI路由器导航创build新的历史堆栈,而其他人将历史项目放在根历史logging中,即使从状态到子状态应该附加到logging状态IMO的历史。
问题
- 任何人都可以解释在哪些情况下,
ui-sref
或$state.go(...)
将历史logging添加到新创build的堆栈中? - 他们什么时候被追加到
root
? - 模态是以一种特殊的方式对待吗?
对不起,没有更具体的,但应用程序是相当复杂的,我不知道如何孤立在一个单一的问题。 也许我错过了一个很好的文档…
即使你没有find你所要求的所有信息,我也会尽力回答这个问题。
很多人 – 包括我自己 – 似乎很难理解导航系统和历史是如何运作的。
我早些时候回答了一个问题 ,试图解释为什么事情不像预期的那样工作。 看来导航会跟踪用户使用集合访问的每个视图。 实际上$ionicHistory
对象中有2个集合。 第一个$ionicHistory.viewHistory().views
似乎跟踪当前堆栈中的每个访问视图,而另一个$ionicHistory.viewHistory().histories
跟踪整个应用程序的所有历史logging。
你可能有不同types的标签,sidemenus或常规视图的历史。
你可以看到并行独立历史如何在这个codepen中工作。
那里有两个不同的历史。 一个用于home标签,第二个用于about标签。
浏览每个选项卡中的子项目并返回到上一个选项卡,您会注意到导航系统已经记住了以前的状态。
我在这里准备了另外一个潜水员,在那里你可以看到导航如何工作,并显示在页面上的一些细节。
每当用户访问新页面(集合中的当前视图用方括号包装$ionicHistory.viewHistory().views
,视图集合$ionicHistory.viewHistory().views
都会更新。
如果视图已添加到集合中,则不会(不应该)再次添加视图。
您可以更改清除历史logging( $ionicHistory.clearHistory()
)的行为或设置当前历史logging的根目录:
$ionicHistory.nextViewOptions({ historyRoot: true });
在我的plunker的发票页面有一个绿色的button(其他的根视图)。 当按下时,我设置新的历史根和改变状态:
$ionicHistory.nextViewOptions({ historyRoot: true }); $state.go('otherviewroot');
事情按预期工作,事实上现在我没有后视图,我的堆栈只包含当前视图。
当你尝试序列时,事情会变得混乱:
Home - Contacts - Invoices - Home (button in the header).
现在看起来Ionic已经失去了对顺序的控制,并不断增加对collections的看法。
按主页button应该清除后退button,因为我们是在当前历史的根目录,但它不会发生。
反复使用相同的模式会无限增加collections的大小。
我想这不是正确的行为,需要修复。
回到你的问题。
Android中的后退button…意味着它遵循相同的模式。
幸运的是,手段不被视为常规的意见,并不影响收集。
作为前一篇文章的附加信息。
历史堆栈总是链接到“ion-nav-view”模板。 所以根历史堆栈是为第一个“ion-nav-view”项目创build的。
如果您打算使用不同的历史堆栈,我build议始终将ion-nav-view链接到视图名称: <ion-nav-view name="default"></ion-nav-view>
而不是<ion-nav-view></ion-nav-view>
在这个CodePen中,你有一个用于标签页和其他页面(名为“标签”,“其他”,“other1”)的RootStack,然后在标签页中为每个标签有一个子堆栈。 标签页和其他页面在Root ion-nav-view中运行。 在我的testing过程中,我需要为根ion-nav-view指定一个名称,然后在控制器中引用这个视图名称。 否则,在主页面之间切换时总会重新创build堆栈(Other => Tabs => Other => ..)
根堆栈的Html:
<ion-nav-view name="default"></ion-nav-view>
控制器:
.state('other', { url: "/other", views: { 'default': { templateUrl: "templates/other.html", } }, .state('tabs', { url: "/tab", abstract: true, views: { 'default': { templateUrl: "templates/tabs.html", } } })
在选项卡模板中,我为不同的选项卡堆栈分配了一个新的ion-nav-view(如在默认离子选项卡模板中完成的那样)
例如对于home-tab(和家庭堆栈),Html看起来像这样(页面主页,事实):
<ion-nav-view name="home-tab"></ion-nav-view>
控制器:
.state('tabs.home', { url: "/home", views: { 'home-tab': { templateUrl: "templates/home.html", }, } }) .state('tabs.facts', { url: "/facts", views: { 'home-tab': { templateUrl: "templates/facts.html", }, } })
我也提交了上面的codepen的错误报告。 错误地转回历史。 https://github.com/driftyco/ionic/issues/4086
我不确定我的修复。 也许历史function需要重新devise更多的全球解决问题..