i ui-router` $ stateParams বনাম $ state.params

Question

এর সাথে ui-router, ইউআরএলে প্যারামিটারগুলিতে অ্যাক্সেস পেতে হয় কোনও নিয়ন্ত্রক $stateবা ইনজেক্ট করা সম্ভব $stateParams। তবে এর মাধ্যমে প্যারামিটারগুলি অ্যাক্সেস করা $stateParamsকেবলমাত্র নিয়ামক দ্বারা পরিচালিত রাষ্ট্রের সাথে সম্পর্কিত প্যারামিটারগুলিকে উন্মুক্ত করে যা এটি অ্যাক্সেস করে এবং এর প্যারেন্টস স্টেটস যখন $state.paramsকোনও শিশু রাষ্ট্রের মতো সমস্ত পরামিতি থাকে।

নীচের কোডটি দেওয়া, যদি আমরা সরাসরি ইউআরএল লোড করি 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
}

প্রশ্ন হচ্ছে, পার্থক্য কেন? এবং আপনার কখন এবং কেন ব্যবহার করা উচিত তার চারপাশে সর্বোত্তম অনুশীলনের গাইডলাইন রয়েছে বা সেগুলির কোনওটি এড়ানো উচিত নয়?

Comments

এ জাতীয় চমত্কারভাবে চিত্রিত প্রশ্ন - আমি যা বলার চেষ্টা করছিলাম তা আমাকে বলার জন্য আপনাকে ধন্যবাদ!

— পিটার নিক্সি

Answer 1

ডকুমেন্টেশনটি এখানে আপনার অনুসন্ধানগুলি পুনরুত্থিত করে: https://github.com/angular-ui/ui-router/wiki/URL- রাউটিং# স্টেট্যাপেরামস- সার্ভিস

যদি আমার স্মৃতি পরিবেশন করে, $stateParamsমূলটির চেয়ে পরে পরিচয় করা হয়েছিল $state.paramsএবং ধারাবাহিকভাবে লেখা এড়াতে কোনও সাধারণ সহায়ক ইনজেক্টর বলে মনে হয় $state.params।

আমার সন্দেহ আছে যে কোনও সেরা অনুশীলন নির্দেশিকা আছে, তবে প্রসঙ্গটি আমার পক্ষে জিততে পারে। আপনি যদি কেবল ইউআরএল-এ প্রাপ্ত প্যারামগুলিতে অ্যাক্সেস চান তবে ব্যবহার করুন $stateParams। আপনি যদি রাজ্য সম্পর্কে আরও জটিল কিছু জানতে চান তবে ব্যবহার করুন $state।

Comments

আমি ব্যবহার নিজেকে খুঁজে পাওয়া যায় $state.paramsযে ACtrl, কারণ আমি চেক করতে চেয়েছিলেন yetAnotherParamসেট করা হয়। যাতে এটি না হয়, আমি কিছু করতে পারি। আমি যে বিস্তারিত মধ্যে যাচ্ছি না কিছু যেমন তার নিজস্ব একটি প্রশ্ন পরোয়ানা পারে। যাইহোক, আমি অনুভব করি যে কোনও শিশু রাষ্ট্র দ্বারা প্রবর্তিত এবং বর্তমান রাষ্ট্রের মাধ্যমে স্বীকৃত নয় এমন একটি পরামিতি পরীক্ষা করে আমি হ্যাক করছি $stateParams। সেই থেকে আমি একটি বিকল্প পন্থা পেয়েছি।

— মেরোট

আসলে, উভয়ের মধ্যে পার্থক্য কেবলমাত্র প্রসঙ্গের বিষয়টির চেয়ে বেশি। P stateParams ইউআরএল ভিত্তিক প্যারামগুলি ক্যাপচার করে যা $ রাষ্ট্র বিবেচনা করে সেই রাজ্যের ক্ষেত্রে প্রযোজ্য, এমনকি তার শিশু রাজ্যে আরও বেশি প্যারাম রয়েছে । $ state.params সব URL + অ url এর ভিত্তি প্যারাম ক্যাপচার বলে মনে হয় বর্তমান অবস্থা যেখানে আপনি থাকেন। আপনি রাজ্যের হন parent.child, তাহলে $stateParamsএ parentControllerURL টি-ভিত্তিক প্যারাম মূল্যায়ন করবে parent, কিন্তু না যারা parent.child। এই সমস্যাটি দেখুন ।

— অ্যামি.জেএস

অন্যদিকে, $ stateParams কাস্টম অবজেক্টস, প্রকার ইত্যাদি সংরক্ষণ করতে পারে যখন। State.params "কাস্টম অবজেক্টগুলিকে সরল বস্তুতে রূপান্তর করবে"।

— অ্যামি.জেএস

$stateParams$state.params

— সংকল্পে

আমি দেখতে পেয়েছি যে সুযোগটি। State.params $ দেখতে can তবে $ stateParams নয়। কেন আমি জানি না।

— ওয়েল্টসচেজার্জ

Answer 2

ব্যবহারের আর একটি কারণ $state.paramsহ'ল ইউআরএল ভিত্তিক রাষ্ট্রের জন্য, যা (আমার মনে) হ'ল দুর্ভাগ্যজনকভাবে নিম্নচাপযুক্ত এবং খুব শক্তিশালী।

আমি কেবল এটি ইউআরএলে প্রকাশ না করে কীভাবে রাষ্ট্র পাস করতে পারি তা গুগল করার সময় আবিষ্কার করেছি এবং এসও-তে অন্য কোথাও একটি প্রশ্নের উত্তর দিয়েছি ।

মূলত, এটি এই ধরণের সিনট্যাক্সের অনুমতি দেয়:

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

Comments

হাই ব্রবাউন, কোনওভাবে আমি এটি কাজ করতে পারি না, আপনার কি কাজের উদাহরণ রয়েছে?

— طوفان_বাস্টার

Answer 3

সম্পাদনা: সংস্করণটির জন্য এই উত্তরটি সঠিক 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
}

Comments

আর প্রযোজ্য নয়। প্লাঙ্কার দেখুন: plnkr.co/edit/r2JhV4PcYpKJdBCwHIWS?p= পূর্বরূপ

— আলেকজান্ডার ভ্যাসিলিভ

Answer 4

এই দুজনের মধ্যে অনেক পার্থক্য রয়েছে। তবে ব্যবহারিকভাবে কাজ করার সময় আমি এটি $state.paramsআরও ভাল ব্যবহার করে দেখতে পেয়েছি । আপনি যখন আরও বেশি প্যারামিটার ব্যবহার করেন তখন এটি বজায় রাখা বিভ্রান্তিকর হতে পারে $stateParams। যেখানে আমরা যদি একাধিক প্যারাম ব্যবহার করি যা ইউআরএল প্যারাম নয় $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'}
      }
    })

Answer 5

আমার একটি মূল অবস্থা রয়েছে যা স্টাচকে সমাধান করে। $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" ব্যবহার করে

Answer 6

পূর্ববর্তী রাষ্ট্রের প্যারামগুলি এক রুট থেকে অন্য রুটে যাওয়ার সময় আমি একটি আকর্ষণীয় পর্যবেক্ষণ করেছিলাম তা হল $ স্টেটপ্যারামগুলি উত্তোলন হয়ে যায় এবং পূর্ববর্তী রুটের রাষ্ট্রীয় প্যারামগুলি বর্তমান রাষ্ট্রের প্যারামগুলির সাথে উত্তীর্ণ হয়েছিল, তবে এটি ব্যবহার $state.paramকরে না।

ব্যবহার করার সময় $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}}

Answer 7

এখানে এই নিবন্ধে স্পষ্টভাবে ব্যাখ্যা করা হয়েছে: $stateপরিষেবাটি রাষ্ট্রের পরিচালনা এবং বর্তমান রাষ্ট্রের প্রাসঙ্গিক তথ্যগুলির জন্য বেশ কয়েকটি দরকারী পদ্ধতি সরবরাহ করে। বর্তমান অবস্থা প্যারামিটারগুলি $stateপ্যারাম কীগুলিতে পরিষেবাটিতে অ্যাক্সেসযোগ্য । $stateParamsসেবা এই খুব একই বস্তুর ফেরৎ। অতএব, $stateParamsপরিষেবাটি পরিষেবাটিতে প্যারাম অবজেক্টটি দ্রুত অ্যাক্সেস করার জন্য কঠোরভাবে একটি সুবিধাজনক $stateপরিষেবা।

এই হিসাবে, কোনও নিয়ামকের $stateপরিষেবা এবং এর সুবিধামত পরিষেবা উভয়ই ইনজেক্ট করা উচিত নয় $stateParams,। যদি $stateকেবলমাত্র বর্তমান প্যারামিটারগুলি অ্যাক্সেস করার জন্য ইঞ্জেকশন দেওয়া হয়, তবে নিয়ামকটি $stateParamsপরিবর্তে ইনজেকশনে পুনরায় লিখতে হবে।