离子历史是如何工作的,何时创build非根堆栈?

我正在使用离子 v1.0.0,不明白由$ionicHistorypipe理的平行历史的作品。

特别是在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更多的全球解决问题..