使用 Angular UI-Router 在 Ionic 框架中将状态作为新路由处理

Posted 2023-03-16

【中文标题】使用 Angular UI-Router 在 Ionic 框架中将状态作为新路由处理

【英文标题】：Handle State as new Route in Ionic Framework with Angular UI-Router

【发布时间】：2014-03-04 21:21:10

【问题描述】：

我正在使用 Ionic 框架及其 AngularJS UI-Router 和 $stateProvider 来处理我的应用程序中的不同视图。

但是，我无法弄清楚如何告诉 $stateProvider 我有不同的“主视图”，每个都有不同的子视图。

例如，当我在/#/home 上时，单击将我发送到/#/about 的链接，然后/#/about 不会呈现为它自己的新视图。相反，它会转换到它，因为它是 /#/home 的子页面。

当我用 AngularJS 的 $routeProvider 替换 $stateProvider 时，它的工作方式与它应该的一样，但是所有的转换都消失了。

我制作了一支 Pen 供您查看。

http://codepen.io/anon/pen/gBDFi

它们之间不应有过渡。每个“基本”网址都应该是一个新的“标签”。

【问题讨论】：

我不确定您所说的“子页面”是什么意思。将hide-back-button="true" 添加到两个视图（<view></view>）并从<nav-view></nav-view> 中删除animation="slide-left-right"。这就是你想要达到的目标吗？但是只有在你的“主要视图”之间切换时？

几乎！这正是我想要实现的行为。但我想保留subpages 的滑动动画。对于subpages，我的意思是例如/#/about/tom，其中tom 是/#/about 的子页面。

【参考方案1】：

不知道这是否仍然相关，因为它是在 2 月发布的，我绝不是 ng-pro，但这是我的尝试 JSBinLink

我做了两件主要的事情，将内容包装在 ion-tabs 中，并将其作为抽象状态添加到 stateProvider 中。

使用此结构，您有两个独立的选项卡“主页”、“关于” - 注意，没有返回按钮。 但是，如果您在“关于”中导航到“汤姆” - 您会得到一个后退按钮。

还有其他方法可以实现类似的东西，一种是创建子状态等。

我建议查看 UI-Routers 文档。 它大部分写得很好并且信息量很大 - 还有一个 Tom Kindberg 的创建视频，通过 here 解释了它的主要概念。

希望这会有所帮助。

【参考方案2】：

$StateRouteProvider 和 $UrlRouteProvider 的区别..

$UrlRouteProvider.otherwise(url); -->路由到给定的url。

$StateRouteProvider.otherwise(state); -->路由到给定状态。

因此，如果您使用的是 ui-router，那么无论何时需要更改视图，请使用 $state.go()。在 $location.path(URL) 的情况下，将在从独立状态转换到当前状态的情况下工作。如果您希望通过同一父级下的州进行路由，则必须使用 $state 路由。