`ui-router` $ stateParams ile $ state.params karşılaştırması

İle ui-router, URL'deki parametrelere erişmek için bir denetleyiciye $stateveya $stateParamsiçine enjekte etmek mümkündür . Bununla birlikte, parametrelere $stateParamsyalnızca ona erişen denetleyici tarafından yönetilen duruma ve üst durumlarına ait parametreleri ortaya çıkarırken $state.params, tüm alt durumlar dahil tüm parametrelere sahiptir.

Aşağıdaki kod göz önüne alındığında, URL'yi doğrudan yüklersek http://path/1/paramA/paramB, denetleyiciler yüklendiğinde böyle olur:

$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
}

Soru şu ki, fark neden? Ve ne zaman ve neden kullanmanız gerektiği veya bunlardan herhangi birini kullanmaktan kaçınmanız gerektiği konusunda en iyi uygulama yönergeleri var mı?

Belgeler, burada bulgularınızı yinelemektedir: https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service

Hafızam hizmet ediyorsa $stateParams, orijinalinden daha sonra tanıtıldı $state.paramsve sürekli yazmaktan kaçınmak için basit bir yardımcı enjektör gibi görünüyor $state.params.

Herhangi bir en iyi uygulama yönergesi olduğundan şüpheliyim, ancak bağlam benim için artıyor. Sadece url'ye alınan parametrelere erişmek istiyorsanız, o zaman kullanın $stateParams. Devletin kendisi hakkında daha karmaşık bir şey bilmek istiyorsanız, kullanın $state.

$state.paramsKullanmanın bir başka nedeni de (bana göre) ne yazık ki yetersiz belgelenmiş ve çok güçlü olan URL tabanlı olmayan durumdur.

Bunu URL'de göstermek zorunda kalmadan durumu nasıl geçireceğimi araştırırken keşfettim ve SO'da başka bir yerde bir soruyu yanıtladım .

Temel olarak, bu tür bir sözdizimine izin verir:

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

DÜZENLEME: Bu yanıt sürüm için doğrudur 0.2.10. @Alexander Vasilyev'in belirttiği gibi sürümde çalışmıyor 0.2.14.

Kullanmanın başka bir nedeni de $state.params, bunun gibi sorgu parametrelerini çıkarmanız gerektiğinde:

$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
}

Bu ikisi arasında pek çok fark var. Ama pratik olarak çalışırken $state.paramsdaha iyi kullandığını buldum . Daha fazla parametre kullandığınızda, bunu sürdürmek kafa karıştırıcı olabilir $stateParams. URL parametresi olmayan birden çok parametre kullanırsak $stateçok yararlıdır

 .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'}
      }
    })

Sth'yi çözen bir kök durumum var. $stateÇözümleme parametresi olarak geçmek , için kullanılabilirliği garanti etmez $state.params. Ama $stateParamsirade kullanmak .

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:...}

"Açısal": "~ 1.4.0", "açısal-ui-yönlendirici": "~ 0.2.15" kullanma

Önceki durum parametrelerini bir rotadan diğerine geçirirken yaptığım ilginç bir gözlem, $ stateParams'ın kaldırılması ve mevcut durum parametreleriyle geçirilen önceki yolun durum parametrelerinin üzerine yazması, ancak $state.params kullanılmamasıdır .

Kullanırken $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 kullanılırken:

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}}

İşte bu makalede açıklanan açıkça edilir: $stateServis son durumuyla ilgili devlet manipüle yanı sıra ilgili veriler için yararlı çeşitli yöntemler sunar. Mevcut durum parametrelerine, $stateservisteki params anahtarından erişilebilir . $stateParamsHizmet bu çok aynı nesneyi döndürür. Bu nedenle, $stateParamshizmet, hizmet üzerindeki parametreler nesnesine hızlı bir şekilde erişmek için kesinlikle bir kolaylık $statehizmetidir.

Bu nedenle, hiçbir denetleyici hem $statehizmeti hem de kolaylık hizmetini hiçbir zaman enjekte etmemelidir $stateParams. Eğer $stateakım parametrelerini erişmek için sadece enjekte ediliyor, kontrolör enjekte etmek yeniden yazılmalıdır $stateParamsyerine.