如何动态更改ui-router使用的默认状态?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何动态更改ui-router使用的默认状态?相关的知识,希望对你有一定的参考价值。

我有一个应用程序应该根据一些API数据服务于不同的状态。如果我的应用程序的状态配置如下所示:

$stateProvider.state('order', {
    url: '/order/{serviceId}',
    controller: 'OrderController',
    abstract: true,
    resolve: {
        OrderResolve: function(Order, $stateParams){
            return Order.fetch($stateParams.serviceId);
        }
    }

}).state('order.sharepoint', {
    url: '/sharepoint',
    abstract: true,
    controller: 'SharePointController'

}).state('order.sharepoint.index', {
    url:'',
    controller: 'SharePointServiceController'

}).state('order.sharepoint.setup', {
    url:'',
    controller: 'SharePointSetupController'

}).state('order.sharepoint.confirm', {
    url:'',
    controller: 'SharePointConfirmController'
});

然后我希望默认2个状态中的1个基于OrderResolve对象中的值。基本上,我使用resolve获取API数据,告诉我此用户是否已激活SharePoint服务。如果OrderResolve.hasSharepoint == true然后我想默认为order.sharepoint.index状态,但如果OrderResolve.hasSharepoint == false然后我想默认为order.sharepoint.setup状态。第一个状态显示SharePoint数据,第二个状态只是“设置”Sharepoint服务的表单。

有没有一种简单的方法来实现这种功能?

答案

你需要一个中间状态,你已经拥有它。如果你从abstract: true,中删除order.sharepoint并且总是转到那个状态而不管你的OrderResolve解析值。

然后,在SharePointController中,您可以访问OrderResolve,并且可以确定目标状态:

// inside SharePointController

if (OrderResolve.hasSharepoint == true){
  $state.go('order.sharepoint.index');
else {
  $state.go('order.sharepoint.setup');
}

以上是关于如何动态更改ui-router使用的默认状态?的主要内容,如果未能解决你的问题,请参考以下文章

使用AngularJS中的UI-Router将状态重定向到默认子状态

如何在触发状态转换 ui-router 时保留 ui-view 的旧内容并更改另一个

ui-router 状态更改后销毁 hls.js 流

ui-router 使用动态参数解析

当 UI-Router ES6 中的状态更改时,$stateChangeStart 不会被触发?

在 Angular ui-router 嵌套状态 url 更改,但模板未加载