离子历史如何工作以及何时创建非根堆栈？

Question

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

尤其是在 Android 设备上，当使用（以前的硬件）返回按钮时，我的 Angular 应用程序有时会表现得很奇怪，我想了解原因。 （例如：向后导航会打开一个很久以前被$ionicGoBack() 关闭的视图）

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

问题

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

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

Answer 1

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

很多人 - 包括我自己 - 似乎都很难理解导航系统和历史是如何运作的。

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

您可能有不同类型的选项卡、侧边菜单或常规视图的历史记录。

您可以在此codepen 中了解并行独立历史的工作原理。
那里有2种不同的历史。一个用于主页选项卡，第二个用于关于选项卡。

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

我在这里准备了另一个plunker，您可以在其中查看导航如何使用页面中显示的一些详细信息。

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

如果视图已添加到集合中，则不会（不应该）再次添加。

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

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

在我的 plunker 的发票页面中有一个绿色按钮（其他根视图）。按下时，我设置了新的历史根并更改状态：

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

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

当你尝试这个序列时事情会变得一团糟：

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

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

按下主页按钮应该清除返回按钮，因为我们在当前历史记录的根目录上，但它不会发生。

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

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

回到你的问题。

Android 中的后退按钮可以工作...意味着它遵循相同的模式。

幸运的是，Modal 不被视为常规视图，不会影响集合。

Answer 2

作为上一篇文章的补充信息。

历史堆栈始终链接到“ion-nav-view”模板。因此为第一个“ion-nav-view”项创建了根历史堆栈。

如果您打算使用不同的历史堆栈，我建议始终将 ion-nav-view 链接到视图名称： <ion-nav-view name="default"></ion-nav-view> 而不是 <ion-nav-view></ion-nav-view>

在这个CodePen 中，您有一个用于标签页和其他页面（名为“tabs”、“other”、“other1”）的 RootStack，然后在标签页中，每个标签都有一个子堆栈。 标签页和其他页面在 Root ion-nav-view 中运行。在我的测试中，我需要为根 ion-nav-view 分配一个名称，然后在控制器中引用这个视图名称。否则，在主页面之间切换时总是会重新创建堆栈（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（就像在默认的 ionic 标签模板中所做的那样）

例如对于主页选项卡（和主页堆栈），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

不过，我不确定我的解决方法。 也许历史功能需要在全球范围内重新设计以解决问题..