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

Posted 2021-04-17

我有一个应用程序应该根据一些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');
}