控制器和解析中 ui 路由器的参数

Question

我已经配置了以下ui路由器。

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：

1. 我不希望它显示在网址中
2. 浏览器中的 https://localhost:3000/#/new 使connected成为false，而浏览器中的 https://localhost:3000/#/newTRUE 使connected成为true
3. connected可以传递到控制器EditorCtrl并PanelsCtrl
4. connected可以在global.editorresolve中可用;理想情况下，我们可以根据connected的值解析不同的对象。

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

Answer 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(或PanelCtrl)中，您可以像这样使用它：

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.
...
}]);

Answer 2

您可以使用经典方法 - 在解析中

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

• global.newTRUE - 在$state配置中设置值
• global.new - 在$state配置中设置值
• global.editor.panel - 以transition/go或ui-sref格式设置参数

定义是这样的：

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

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

Answer 3

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

此外，根据#2，您需要connectedfalse/new，true/newTRUE。我们可以通过将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)

希望这有帮助！