` ui-router ' $stateParams против $state.params
С ui-router
, можно ввести либо $state
или $stateParams
в контроллер, чтобы получить доступ к параметрам в URL. Однако, доступ к параметрам через $stateParams
предоставляет только параметры, принадлежащие состоянию, управляемому контроллером, который обращается к нему, и его родительским состояниям, в то время как $state.params
имеет все параметры, в том числе в любом состояний ребенка.
учитывая следующий код, если мы напрямую загружаем URL http://path/1/paramA/paramB
, вот как это происходит, когда контроллеры нагрузка:
$stateProvider.state('a', {
url: 'path/:id/:anotherParam/',
controller: 'ACtrl',
});
$stateProvider.state('a.b', {
url: '/:yetAnotherParam',
controller: 'ABCtrl',
});
module.controller('ACtrl', function($stateParams, $state) {
$state.params; // has id, anotherParam, and yetAnotherParam
$stateParams; // has id and anotherParam
}
module.controller('ABCtrl', function($stateParams, $state) {
$state.params; // has id, anotherParam, and yetAnotherParam
$stateParams; // has id, anotherParam, and yetAnotherParam
}
вопрос в том, почему разница? И есть ли рекомендации по лучшей практике, когда и почему вы должны использовать или избегать использования любого из них?
7 ответов
документация повторяет ваши выводы здесь:https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
если мне не изменяет память, $stateParams
был представлен позже, чем оригинал $state.params
, и, кажется, простой вспомогательный инжектор, чтобы избежать непрерывной записи $state.params
.
Я сомневаюсь, что есть какие-то рекомендации, но контекст выигрывает для меня. Если вы просто хотите получить доступ к параметрам, полученным в url, используйте $stateParams
. Если вы хотите узнать что-то более сложное о самом государстве, используйте $state
.
еще одна причина, чтобы использовать $state.params
для состояния, не основанного на URL, которое (на мой взгляд) прискорбно недокументировано и очень мощное.
Я только что обнаружил это, когда гуглил о том, как передать состояние без необходимости выставлять его в URL и отвечал на вопрос в другом месте так.
в принципе, он позволяет такой синтаксис:
<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>
EDIT: этот ответ верен для версии 0.2.10
. Как отметил @Alexander Vasilyev, он не работает в версии 0.2.14
.
еще одна причина, чтобы использовать $state.params
- это когда нужно извлечь параметры запроса, как это:
$stateProvider.state('a', {
url: 'path/:id/:anotherParam/?yetAnotherParam',
controller: 'ACtrl',
});
module.controller('ACtrl', function($stateParams, $state) {
$state.params; // has id, anotherParam, and yetAnotherParam
$stateParams; // has id and anotherParam
}
у меня есть корневое состояние, которое разрешает sth. Проходя $state
в качестве параметра resolve не гарантирует доступность для $state.params
. Но используя $stateParams
будет.
var rootState = {
name: 'root',
url: '/:stubCompanyId',
abstract: true,
...
};
// case 1:
rootState.resolve = {
authInit: ['AuthenticationService', '$state', function (AuthenticationService, $state) {
console.log('rootState.resolve', $state.params);
return AuthenticationService.init($state.params);
}]
};
// output:
// rootState.resolve Object {}
// case 2:
rootState.resolve = {
authInit: ['AuthenticationService', '$stateParams', function (AuthenticationService, $stateParams) {
console.log('rootState.resolve', $stateParams);
return AuthenticationService.init($stateParams);
}]
};
// output:
// rootState.resolve Object {stubCompanyId:...}
использование "угловой": "~1.4.0", "угловой-ui-маршрутизатор":"~0.2.15"
есть много различий между этими двумя. Но во время работы практически я обнаружил, что с помощью $state.params
лучше. Когда вы используете все больше и больше параметров, это может быть запутанным для поддержания в $stateParams
. если мы используем несколько параметров, которые не являются URL-адрес параметр $state
очень полезным
.state('shopping-request', {
url: '/shopping-request/{cartId}',
data: {requireLogin: true},
params : {role: null},
views: {
'': {templateUrl: 'views/templates/main.tpl.html', controller: "ShoppingRequestCtrl"},
'body@shopping-request': {templateUrl: 'views/shops/shopping-request.html'},
'footer@shopping-request': {templateUrl: 'views/templates/footer.tpl.html'},
'header@shopping-request': {templateUrl: 'views/templates/header.tpl.html'}
}
})
интересное наблюдение, которое я сделал при передаче предыдущих параметров состояния с одного маршрута на другой, заключается в том, что $stateParams поднимается и перезаписывает параметры состояния предыдущего маршрута, которые были переданы с текущими параметрами состояния, но с использованием $state.param
s не.
при использовании $stateParams
:
var stateParams = {};
stateParams.nextParams = $stateParams; //{item_id:123}
stateParams.next = $state.current.name;
$state.go('app.login', stateParams);
//$stateParams.nextParams on app.login is now:
//{next:'app.details', nextParams:{next:'app.details'}}
при использовании $state.params:
var stateParams = {};
stateParams.nextParams = $state.params; //{item_id:123}
stateParams.next = $state.current.name;
$state.go('app.login', stateParams);
//$stateParams.nextParams on app.login is now:
//{next:'app.details', nextParams:{item_id:123}}
здесь в этой статье четко объяснил:$state
сервис предоставляет множество полезных методов для управления государством, а также соответствующие данные о текущем состоянии. Параметры текущего состояния доступны на $state
обслуживание на ключе params. The $stateParams
service возвращает этот самый объект. Следовательно,$stateParams
сервис-это строго удобный сервис для быстрого доступа к объекту params на $state
сервис.
как таковой нет контроллер должен когда-либо вводить оба $state
сервис и его удобство обслуживания,$stateParams
. Если $state
вводится только для доступа к текущим параметрам, контроллер должен быть переписан для ввода $stateParams
вместо.