控制器中ui-router的一个参数和解析答案

【问题标题】：A parameter of ui-router in controller and resolve控制器中ui-router的一个参数和解析
【发布时间】：2017-03-15 03:26:57
【问题描述】：

我已经配置了以下 ui-router。

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('global.editor', {
            url: '/posts/editor/{id}',
            templateUrl: '/htmls/editor.html',
            controller: 'EditorCtrl',
            resolve: {
                post: ['$stateParams', 'codeService', function ($stateParams, codeService) {
                    return codeService.getPost($stateParams.id)
                }]
            }
        }
        .state('global.new', {
            url: '/new',
            templateUrl: '/htmls/editor.html',
            controller: 'EditorCtrl'
        })
        .state('global.newTRUE', {
            url: '/newTRUE',
            templateUrl: '/htmls/editor.html',
            controller: 'EditorCtrl'
        })           
        .state('global.editor.panels', {
            controller: 'PanelsCtrl',
            params: { layout: 'horizontal' },
            templateUrl: function (params) { return "/htmls/" + params.layout + '.html' }
        }
}])

app.controller('EditorCtrl', ['$scope', '$state', function ($scope, $state) {
    $scope.layout = "horizontal";
    $scope.$watch('layout', function () {
        $state.go('global.editor.panels', { layout: $scope.layout });
    });
}]);

因此，浏览器中的https://localhost:3000/#/new 导致（状态global.editor，然后到）状态global.editor.panels。

现在，我想添加一个参数connected：

我不希望它显示在 url 中
浏览器中的https://localhost:3000/#/new 使connected 成为false，而浏览器中的https://localhost:3000/#/newTRUE 使connected 成为true
connected 可以传入控制器 EditorCtrl 和 PanelsCtrl
connected 可以在global.editor 的resolve 中使用；理想情况下，我们可以根据connected的值来解析不同的对象。

有谁知道如何做到这一点？

【问题讨论】：

从您的帖子中我不确定您是否尝试过，但为什么不为global.new 和global.newTRUE 状态添加resolve。在那些州像resolve: { connected: true/false } 这样的东西。基于此，它应该在 EditorCtrl 中可用。

标签： javascript angularjs angular-ui-router nested-views

【解决方案1】：

您可以为 new 和 newTRUE 添加解析：

 .state('global.new', {
     url: '/new',
     templateUrl: '/htmls/editor.html',
     resolve: {
         isConnected: function() {
             return false;
         }
     },
     controller: 'EditorCtrl'
 })
 .state('global.newTRUE', {
     url: '/newTRUE',
     templateUrl: '/htmls/editor.html',
     resolve: {
         isConnected: function() {
             return true;
         }
     },
     controller: 'EditorCtrl'
 })

在 EditorCtrl（或 PanelsCtrl）中，您可以像这样使用它：

app.controller('EditorCtrl', ['$scope', '$state', 'isConnected', function($scope, $state, isConnected) {
    console.log("connected : " + isConnected); // you can save this value in Service and use it later.
    ...
}]);

【讨论】：

【解决方案2】：

您可以使用经典方法 - 解决

或者您可以使用 Angular ui 路由器中的隐藏参数。在您的父 global 状态中定义 params : {isConnected' : null}。在：

global.newTRUE - 在 $state 配置中设置值
global.new - 在 $state 配置中设置值
global.editor.panels - 在transition/go 或ui-sref 中设置参数

定义是这样的：

$stateProvider
      .state('global.newTRUE', {
        url : '/:newTRUE',
        params : {
          'isConnected' : false
        }
   });
}

在控制器中你从$stateParams 进入。这种方法的问题是隐藏参数在刷新页面中丢失，除非设置了默认值

【讨论】：

【解决方案3】：

您当然可以使用 UI-Router 状态配置的params 不在 URL 中显示它并实现所有提到的点。

此外，根据 #2，对于 /new，您需要 connected 为 false，对于 /newTRUE，您需要为 true。我们可以通过传递true 或false 作为这些状态的默认值来做到这一点。像这样的：

$stateProvider
    .state('global.editor', {
        url: '/posts/editor/{id}',
        templateUrl: '/htmls/editor.html',
        params: { connected: null },
        controller: 'EditorCtrl',
        resolve: {
            post: ['$stateParams', 'codeService', function ($stateParams, codeService) {
                return codeService.getPost($stateParams.id)
            }]
        }
    }
    .state('global.new', {
        url: '/new',
        templateUrl: '/htmls/editor.html',
        params: { connected: false }, // default false for /new
        controller: 'EditorCtrl'
    })
    .state('global.newTRUE', {
        url: '/newTRUE',
        templateUrl: '/htmls/editor.html',
        params: { connected: true }, // default true for /newTRUE
        controller: 'EditorCtrl'
    })           
    .state('global.editor.panels', {
        controller: 'PanelsCtrl',
        params: { layout: 'horizontal', connected: null },
        templateUrl: function (params) { return "/htmls/" + params.layout + '.html' }
    }

对于#3，为了在您的控制器（EditorCtrl 和PanelsCtrl）中访问connected，您可以将$stateParams 注入控制器并使用$stateParams.connected 来获取它。

对于#4，（这或多或少类似于实现#3）

就像你得到$stateParams.id一样，你也可以有$stateParams.connected，你可以根据connected的值来解析不同的对象。像这样的：

.state('global.editor', {
    url: '/posts/editor/{id}',
    templateUrl: '/htmls/editor.html',
    params: { connected: null },
    controller: 'EditorCtrl',
    resolve: {
        post: ['$stateParams', 'codeService', function ($stateParams, codeService) {
            return $stateParams.connected ? 
                codeService.getPost($stateParams.id) :
                codeService.getSomethingElse($stateParams.id) 
        }]
    }
}

但是，要使其正常工作，请确保在访问global.editor 状态时将connected 作为参数传递（使用$state.go 或ui-sref）

希望这会有所帮助！

【讨论】：