`пользовательский интерфейс-маршрутизатор` $stateParams против $государство.параметры

Question

`пользовательский интерфейс-маршрутизатор` $stateParams против $государство.параметры

С 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

}

вопрос в том, почему разница? И есть ли рекомендации по лучшей практике, когда и почему вы должны использовать или избегать использования любого из них?

605 7

angularjs angular-ui-router

7 ответов:

Comments

Ничего не найдено.

Matt Way · Accepted Answer · 2014-04-15 14:37:47

документация повторяет ваши выводы здесь:https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service

если мне не изменяет память, $stateParams был введен позже, чем оригинал $state.params, и, кажется, простой вспомогательный инжектор, чтобы избежать непрерывной записи $state.params.

Я сомневаюсь, что есть какие-то рекомендации, но контекст выигрывает для меня. Если вы просто хотите получить доступ к параметрам, полученным в url, то используйте $stateParams. Если вы хотите узнать что-то более сложное о самом государстве, используйте $state.

bbrown · Accepted Answer · 2017-05-23 15:34:29

еще одна причина, чтобы использовать $state.params для состояния, не основанного на URL, которое (на мой взгляд) прискорбно недокументировано и очень мощно.

Я только что обнаружил это, когда гуглил о том, как передать состояние без необходимости выставлять его в URL и отвечал на вопрос в другом месте так.

в принципе, это позволяет такой синтаксис:
<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

daerin · Accepted Answer · 2017-02-27 10:22:59

EDIT: этот ответ верен для версии 0.2.10. Как отметил @Александр Васильев, это не работает в версии 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
}

jchnxu · Accepted Answer · 2016-05-03 10:28:51

у меня есть корневое состояние, которое разрешает sth. Передает $state как параметр разрешения не гарантирует доступность для $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", "угловой пользовательского интерфейса маршрутизатора": "~0.2.15"

Abdullah Al Noman · Accepted Answer · 2017-07-10 11:41:24

есть много различий между этими двумя. Но во время работы практически я обнаружил, что с помощью $state.params лучше. Когда вы используете все больше и больше параметров, это может привести к путанице в$stateParams. где, если мы используем несколько параметров, которые не являются URL param $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'}
      }
    })

Shaun Tobias · Accepted Answer · 2017-02-27 10:24:39

интересное наблюдение, которое я сделал при передаче предыдущих параметров состояния от одного маршрута к другому, заключается в том, что $stateParams поднимается и перезаписывает параметры состояния предыдущего маршрута, которые были переданы с текущими параметрами состояния, но с использованием $state.params не.

при использовании $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.параметры:
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}}

pabloRN · Accepted Answer · 2017-02-27 10:25:19

здесь в этой статье четко объяснил:$state сервис предоставляет множество полезных методов для управления государством, а также соответствующие данные о текущем состоянии. Текущие параметры состояния доступны на $state обслуживание на ключе params. Элемент $stateParams сервис возвращает этот же объект. Следовательно,$stateParams сервис-это строго удобный сервис для быстрого доступа к объекту params на $state сервис.

как таковой нет контроллер должен когда-либо вводить оба $state сервис и его удобство обслуживания,$stateParams. Если $state вводится только для доступа к текущим параметрам, контроллер должен быть переписан для ввода $stateParams вместо.