离子历史如何工作以及何时创建非根堆栈? [英] How does ionic history work and when is a non-root stack created?

问题描述

我正在使用 ionic v1.0.0 并且不了解 $ionicHistory 管理的并行历史的工作方式.

I'm using ionic v1.0.0 and do not understand the way parallel history managed by $ionicHistory works.

特别是在 Android 设备上，当使用(以前的硬件-)后退按钮时，我的 Angular 应用程序有时会表现得很奇怪，我想了解原因.(例如:向后导航会打开很久以前由 $ionicGoBack() 关闭的视图)

Especially on Android devices, when using the (formerly hardware-)back button, my Angular app sometimes behaves strange and I'd like to understand why. (example: navigating back opens a view closed by $ionicGoBack() long time ago)

对我来说，似乎有些 ui-router 导航创建了新的历史堆栈，而其他导航将历史项放在根历史记录中，即使从一个状态到另一个子状态也应该附加到 IMO 记录状态的历史记录中.

For me it seems like some of the ui-router navigations create new history stacks and others put the history items in the root history, even when going from state to sub-state should append to the history where state is recorded IMO.

问题

• 谁能解释在哪些情况下 ui-sref 或 $state.go(...) 将历史项附加到新创建的堆栈中?
• 它们何时附加到 root?
• 模态是否有特殊处理方式?

• Can anybody explain in which cases ui-sref or $state.go(...) append history items to a newly created stack?
• When are they appended to root?
• Are modals treated in a special way?

抱歉没有说得更具体，但该应用程序相当复杂，我不知道如何在单个 plunkr 中隔离问题.也许我错过了一个很好的文档......

Sorry for not being more specific, but the app is rather complicated and I don't know how to isolate the problems in a single plunkr. Maybe I missed a piece of good documentation...

推荐答案

即使您可能无法找到您要询问的所有信息，我也会尝试回答这个问题.

I'll try to answer this question even if you might not find all the info you're asking.

很多人——包括我自己——似乎很难理解导航系统和历史是如何工作的.

Lot of people - included myself - seem to struggle to understand how the navigation system and the history works.

我之前回答了一个问题，试图解释为什么事情没有按预期工作.导航似乎使用集合跟踪用户访问过的每个视图.实际上 $ionicHistory 对象中有 2 个集合.第一个 $ionicHistory.viewHistory().views 似乎跟踪当前堆栈中每个访问过的视图，而另一个 $ionicHistory.viewHistory().history 跟踪整个应用程序的所有历史记录.

I've answered a question earlier trying to explain why things don't work as expected. It seems the navigation keeps track of each view the user has visited using a collection. Actually there are 2 collections in the $ionicHistory object. The first one $ionicHistory.viewHistory().views seems to keep track of each visited view in the current stack while the other $ionicHistory.viewHistory().histories keeps track of all the histories for the whole app.

对于选项卡、副菜单或常规视图，您可能有不同类型的历史记录.

You might have different types of history for tabs, sidemenus or regular views.

您可以在这个 codepen 中了解并行独立历史是如何工作的.
那里有两种不同的历史.一个用于主页选项卡，第二个用于关于选项卡.

You can see how parallel independent histories work in this codepen.
There are 2 different histories there. One is for the home tab and the second is for the about tab.

浏览每个选项卡中的子项并返回上一个选项卡，您会注意到导航系统已经记住了之前的状态.

Navigating through the sub-items in each tab and going back to the previous tab you'll notice that the navigation system has remember the previous state.

我准备了另一个 plunker 在这里你可以看到导航是如何工作的页面中显示了一些详细信息.

I've prepared another plunker here where you can see how the navigation works with some details displayed in the page.

每次用户访问新页面时，视图集合 $ionicHistory.viewHistory().views 都会更新(集合中的当前视图用方括号括起来).

The collection of views $ionicHistory.viewHistory().views is updated each time the user visits a new page (the current view in the collection is wrapped in square brackets).

如果视图已添加到集合中，则不会(不应)再次添加.

If the view has been added to the collection it won't (it shouldn't) be added again.

您可以更改清除历史记录的行为($ionicHistory.clearHistory())或设置当前历史记录的根:

You can change the behaviour clearing the history ($ionicHistory.clearHistory()) or setting the root for the current history:

$ionicHistory.nextViewOptions({
    historyRoot: true
});

在我的 plunker 的发票页面中有一个绿色按钮(其他根视图).按下后，我设置了新的历史根目录并更改状态:

In the Invoice page of my plunker there's a green button (Other Root View). When pressed I set the new history root and change state:

$ionicHistory.nextViewOptions({
    historyRoot: true
});
$state.go('otherviewroot');

事情按预期工作，事实上现在我没有后视图，我的堆栈只包含当前视图.

Things work as expected and in fact now I don't have a back view and my stack contains only the current view.

当你尝试序列时，事情会变得一团糟:

Things get messed up when you try the sequence:

Home - Contacts - Invoices - Home (button in the header).

现在看来 Ionic 已经失去了对序列的控制，并继续向集合添加视图.

Now it's seems Ionic has lost control of the sequence and keeps on adding views to the collection.

按下主页按钮应该清除后退按钮，因为我们在当前历史的根目录上，但它没有发生.

Pressing the home button should clear the back button, since we are on the root for the current history, but it doesn't happen.

反复使用相同的模式会无限增加集合的大小.

Using the same pattern over and over increases the size of the collection indefinitely.

我想这不是正确的行为，需要修复.

I guess this is not the right behaviour and a fix is needed.

回到你的问题.

Android 中的后退按钮有效......意味着它遵循相同的模式.

The back button in Android works ... meaning the it follows the same pattern.

幸运的是，模态不会被视为常规视图，也不会影响集合.

Modals luckily are not treated as regular views and don't affect the collection.

这篇关于离子历史如何工作以及何时创建非根堆栈?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！