কৌনিক জেএস ইউআই রাউটার ইউআরএল ছাড়াই রাজ্যের মধ্যে ডেটা পাস করে


146

ইউআরএল-তে ডেটা প্রকাশ না করেই আমি দুটি রাজ্যের মধ্যে ডেটা পাস করার এই সমস্যার মুখোমুখি হচ্ছি, এটি এর মতো যা ব্যবহারকারীরা সরাসরি এই রাজ্যে সরাসরি অবতরণ করতে পারে না।

উদাহরণ স্বরূপ. আমার দুটি অবস্থা "এ" এবং "বি" রয়েছে। আমি "এ" অবস্থায় কিছু সার্ভার কল করছি এবং কলটির প্রতিক্রিয়া "বি" দিয়ে যাচ্ছি। সার্ভার কলের প্রতিক্রিয়া একটি স্ট্রিং বার্তা, যা বেশ দীর্ঘ, তাই আমি url এ প্রকাশ করতে পারি না।

সুতরাং কৌনিক ইউআই রাউটারের কোনও উপায় নেই যাতে ইউআরএল প্যারাম ব্যবহার না করেই রাজ্যগুলির মধ্যে ডেটা পাস করতে পারে?

উত্তর:


185

আমরা ব্যবহার করতে পারি params, নতুন UI 'তে-রাউটার এর বৈশিষ্ট্য:

এপিআই রেফারেন্স / ui.router.state / P statePovider

paramsএকটি মানচিত্র যা ইউআরএলে ঘোষিত প্যারামিটারগুলি বৈকল্পিকভাবে কনফিগার করে বা অতিরিক্ত নন- url পরামিতিগুলি সংজ্ঞায়িত করে। প্রতিটি প্যারামিটার কনফিগার করার জন্য, প্যারামিটারের নামে কীডযুক্ত একটি কনফিগারেশন অবজেক্ট যুক্ত করুন।

অংশটি দেখুন: " ... অথবা অতিরিক্ত নন-url পরামিতিগুলি সংজ্ঞায়িত করে ... "

সুতরাং রাষ্ট্রীয় ডিএফ হবে:

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
    params: { hiddenOne: null, }
  })

উপরে উল্লিখিত ডকটির কয়েকটি উদাহরণ রয়েছে :

// define a parameter's default value
params: {
  param1: { value: "defaultValue" }
}
// shorthand default values
params: {
  param1: "defaultValue",
  param2: "param2Default"
}

// param will be array []
params: {
  param1: { array: true }
}

// handling the default value in url:
params: {
  param1: {
    value: "defaultId",
    squash: true
} }
// squash "defaultValue" to "~"
params: {
  param1: {
    value: "defaultValue",
    squash: "~"
  } }

প্রসারিত - কাজের উদাহরণ: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

রাষ্ট্রীয় সংজ্ঞার উদাহরণ এখানে:

 $stateProvider
  .state('home', {
      url: "/home",
      params : { veryLongParamHome: null, },
      ...
  })
  .state('parent', {
      url: "/parent",
      params : { veryLongParamParent: null, },
      ...
  })
  .state('parent.child', { 
      url: "/child",
      params : { veryLongParamChild: null, },
      ...
  })

এটি ui-sref ব্যবহার করে কল হতে পারে:

<a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'
  })">home</a>

<a ui-sref="parent({ 
    veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
  })">parent</a>

<a ui-sref="parent.child({
    veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',  
    veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
  })">parent.child</a>

উদাহরণ এখানে দেখুন


প্রস্তাবিত হিসাবে, আমি কোনও নেস্টেড স্টেটে প্যারাম ব্যবহার করার চেষ্টা করেছি (উদাহরণ - "/ ব্যবহারকারী / প্রোফাইল / পরিচিতি", এটি আমাকে কিছুটা ত্রুটি দিয়েছে gave প্যারেন্ট রাষ্ট্রের জন্যও কি আমার "প্যারামগুলি" সংজ্ঞায়িত করা দরকার?
বিজয় ত্যাগী

মনে হয় পিতামাতার প্যারামগুলি সংজ্ঞায়িত করা প্রয়োজন নয়, বিস্তারিত উত্তরের জন্য ধন্যবাদ।
বিজয় ত্যাগী

দুর্দান্ত যদি এটি কোনওভাবেই সহায়তা করে;) শক্তিশালী ইউআই-রাউটার উপভোগ করুন
রাদিম কাহলার

1
দুর্ভাগ্যবশত, এই সাথে কাজ করে না 0.2.10 নামঃ ui-রাউটার এবং যে কি আমি ব্যবহার করছি, এর 0.2.10 সংস্করণে পরিবর্তন এই ত্রুটিটি পেয়েছিলেন হয় - ত্রুটি: রাষ্ট্র 'হোম' অবৈধ প্যারাম
বিজয় tyagi

1
@vijaytyagi, আপনার আপগ্রেড করা উচিত। সহজভাবে, পুরানো সংস্করণ চালিয়ে যাওয়ার কোনও কারণ নেই। এবং যতদূর আমি মনে করি, এই পদক্ষেপটি মসৃণ হওয়া উচিত ...
রাদিম কাহলারের

38

প্যারাম অবজেক্টটি $ stateParams এ অন্তর্ভুক্ত রয়েছে তবে url এর অংশ হবে না।

1) রুট কনফিগারেশনে:

$stateProvider.state('edit_user', {
    url: '/users/:user_id/edit',
    templateUrl: 'views/editUser.html',
    controller: 'editUserCtrl',
    params: {
        paramOne: { objectProperty: "defaultValueOne" },  //default value
        paramTwo: "defaultValueTwo"
    }
});

2) নিয়ামক মধ্যে:

.controller('editUserCtrl', function ($stateParams, $scope) {       
    $scope.paramOne = $stateParams.paramOne;
    $scope.paramTwo = $stateParams.paramTwo;
});

3 এ) একটি নিয়ামক থেকে রাষ্ট্র পরিবর্তন করা

$state.go("edit_user", {
    user_id: 1,                
    paramOne: { objectProperty: "test_not_default1" },
    paramTwo: "from controller"
});

3 বি) এইচটিএমএলে রাজ্য পরিবর্তন করা

<div ui-sref="edit_user({ user_id: 3, paramOne: { objectProperty: 'from_html1' }, paramTwo: 'fromhtml2' })"></div>

Plunker উদাহরণ


1
ধন্যবাদ, নিখুঁত। এছাড়াও লক্ষ্য করা গেছে যে আপনি যদি উভয়ই রাজ্য এবং $ রাষ্ট্রীয় প্যারামগুলি চান তবে আপনার কেবলমাত্র in রাজ্যের ইনজেক্ট করতে হবে। StateParams অবজেক্টটি state: $ state.params এর একটি সম্পত্তি।
মাইকেল কে

1
এটি অবশ্যই জানাতে হবে যে তাদের
এক্সট্রিম বাইকার

2
সংক্ষিপ্ত উদাহরণের জন্য আপনাকে ধন্যবাদ। আমার জন্য কাজ কর! (ইউআই-রাউটার বনাম 1.0.3)
রোবপ্রগ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.