ইউআই-রাউটার ব্যবহার করে কোনও বস্তুকে কোনও রাজ্যে কীভাবে পাস করবেন?


119

আমি একটি রাজ্যে স্থানান্তর করতে সক্ষম হতে চাই এবং ইউআই রাউটার ব্যবহার করে একটি স্বেচ্ছাচারিত বস্তু পাস করতে পারি।

আমি সচেতন যে সাধারণত $stateParamsব্যবহৃত হয়, তবে আমি বিশ্বাস করি যে এই মানটি ইউআরএলতে sertedোকানো হয়েছে এবং আমি চাই না যে ব্যবহারকারীরা এই ডেটা বুকমার্ক করতে সক্ষম হন।

আমি এই জাতীয় কিছু করতে চাই

$state.transitionTo('newState', {myObj: {foo: 'bar'}});

function myCtrl($stateParams) {
   console.log($stateParams.myObj); // -> {foo: 'bar'}
};

URL এ মানগুলি এনকোড না করে এটি করার কোনও উপায় আছে?


1
ইউআই-রাউটার প্রক্রিয়াগুলি নেভিগেশন জুড়ে ইউআরএল রাজ্যগুলি সংরক্ষণ করে। সুতরাং, কোনও ব্যবহারকারী যদি পৃষ্ঠাটি সতেজ করে তবে সে যে পৃষ্ঠায় ছিল সেটিতে ফিরে আসে you আপনি যদি এই আচরণটি ব্যবহার করতে না চান তবে অন্যান্য মেেকানিজমগুলি (আপনার নিয়ামক / নির্দেশিকায় কাঁচা ফাংশন ইত্যাদি) বিবেচনা করুন এবং কুকিজ / অস্থায়ী ডেটা সঞ্চয় করার জন্য সঞ্চয়স্থান
নিওজারু

আপনার ডেটার জন্য কী হিসাবে ইউআরএল দিয়ে লোকালস্টোরেজ ব্যবহার করবেন?
নীল

2
মানগুলি কোথা থেকে আসে? Ui.router এর অনুরোধকৃত স্থানে স্থানান্তরের আগে একটি সুযোগে ডেটা লোড করার "সংকল্প" এর ধারণা রয়েছে। একইভাবে অনেটার এবং অনএক্সিট পদ্ধতি রয়েছে। এছাড়াও, আপনি স্থানীয় সঞ্চয়স্থান ব্যবহার করতে পারেন।
জোশ সি

হিসাবে @ জোশসি। উল্লিখিত, মনে হচ্ছে আপনি কোনও রাজ্যে যাওয়ার আগে সমাধানের ডেটা সন্ধান করতে চাইতে পারেন। github.com/angular-ui/ui-router/wiki#resolve
ট্রাজেকে

কীভাবে এটি অফিসিয়ালি করবেন তা হিসাবে স্ট্যাক ওভারলর্ডের উত্তর দেখুন।
অ্যালিকেলজিন-কিলাকা

উত্তর:


163

সংস্করণ 0.2.13 এ, আপনি অবজেক্টগুলিকে $ state.go এ পাস করতে সক্ষম হওয়া উচিত,

$state.go('myState', {myParam: {some: 'thing'}})

$stateProvider.state('myState', {
                url: '/myState/{myParam:json}',
                params: {myParam: null}, ...

এবং তারপরে আপনার নিয়ামকের প্যারামিটারটি অ্যাক্সেস করুন।

$stateParams.myParam //should be {some: 'thing'}

মাইপ্রামটি ইউআরএলে প্রদর্শিত হবে না।

উৎস:

সুবিধার্থে এখানে পুনরুত্পাদন করা ক্রিস্টোফেরথিলেন https://github.com/angular-ui/ui-router/issues/983 দ্বারা মন্তব্য দেখুন :

ক্রিস্টোফেরথিলেন: হ্যাঁ, এটি এখন 0.2.13 এ কাজ করা উচিত।

.state ('foo',; url: '/ foo /: param1? param2', params: {param3: নাল} // নাল হ'ল ডিফল্ট মান});

। state.go ('foo', {পরম 1: 'বার', পরম 2: 'বাজ', প্যারাম 3: {আইডি: 35, নাম: 'কি'}});

f state 'foo' এ প্যারামগুলি এখন {পরম 1: 'বার', পরম 2: 'বাজ', পরম 3: {আইডি: 35, নাম: 'কি'}}

url হল / foo / বার? পরম 2 = বাজ।


সঙ্গে কাজ করে transitionToপাশাপাশি।
অ্যালিকেলিন-কিলাকা

13
আমি অবশ্যই কিছু ভুল করছি: - / আমি ০.২.১৩ এ আছি তবে আমি যদি পাস এবং আপত্তি করার চেষ্টা করি তবে এটি স্ট্রিং হিসাবে রাজ্যে [object Object]
প্রকাশিত হবে

15
@ এরিচবিএসচুল্জ যদিও এটি এই উত্তরের অন্তর্ভুক্ত নেই তবে এই কাজটি করার কৌশলটি রাজ্যের ইউআরএল স্ট্রিংয়ের প্যারামিটারের নাম অন্তর্ভুক্ত করে এবং প্রকারটিকে JSON হিসাবে নির্দিষ্ট করে। প্রাক্তন। $stateProvider.state('myState', { url: '/myState/{myParam:json}', params: {myParam: null},...দেখুন 0.2.13 রিলিজ নোট এবং এই বৈশিষ্ট্যের জন্য কোড মন্তব্য নেই।
সাইন

1
আমার ইউআরএল-এ আমার একটি আইডি প্যারাম ছিল এবং সেইগুলি প্যারাম অবজেক্টেও যুক্ত করতে হয়েছিল। { url: '/mystate/{id:[0-9]+}', params: { id: null, myParam: null }, ...
গ্রাহামএফ

3
খেলতে অবশ্যই কিছু কালো যাদু থাকতে হবে - আমার পুরো জেসন ইউআরএলটি দেখাচ্ছে: (((
কাবাচোক

25

এই সমস্যার দুটি অংশ রয়েছে

1) এমন একটি প্যারামিটার ব্যবহার করে যা কোনও ইউআরএলকে পরিবর্তন করে না (প্যারামের সম্পত্তি ব্যবহার করে):

$stateProvider
    .state('login', {
        params: [
            'toStateName',
            'toParamsJson'
        ],
        templateUrl: 'partials/login/Login.html'
    })

2) কোনও বস্তুকে প্যারামিটার হিসাবে পাস করা: ঠিক আছে, এখন এটি করার কোনও সরাসরি উপায় নেই , কারণ প্রতিটি প্যারামিটারটি স্ট্রিংয়ে রূপান্তরিত হয় ( EDIT : 0.2.13 থেকে, এটি আর সত্য নয় - আপনি সরাসরি অবজেক্টগুলি ব্যবহার করতে পারেন) তবে আপনি নিজে থেকে স্ট্রিং তৈরি করে এটিকে আলাদা করে নিতে পারেন

toParamsJson = JSON.stringify(toStateParams);

এবং টার্গেটে নিয়ামক আবার অবজেক্টটিকে ডিসরিয়ালাইজ করুন

originalParams = JSON.parse($stateParams.toParamsJson);

1
আসলে অবজেক্টগুলি পাস করার জন্য এটি বেশ দুর্দান্ত হ্যাক :)
টেক

আমরা সরাসরি অবজেক্টটি পাস করতে পারি। গৃহীত উত্তরটি দেখুন
কিশোর রেলেঙ্গি

20

আসলে আপনি এটি করতে পারেন।

$state.go("state-name", {param-name: param-value}, {location: false, inherit: false});

এটি state.go বিকল্পগুলির বিষয়ে অফিসিয়াল ডকুমেন্টেশন

সমস্ত কিছুই সেখানে বর্ণিত হয়েছে এবং আপনি দেখতে পাচ্ছেন এটি করার উপায়।


আমি এই সঠিক কোডটি চেষ্টা করেছি এবং অবজেক্টটি সংরক্ষিত নেই।
বিরমুন্ডি

1
আপনি কেবলমাত্র একক প্যারামিটার মানগুলি পাস করতে পারবেন এমন অবজেক্টগুলি পাস করতে পারবেন না .... আপনি এটিকে একটি অবজেক্ট হিসাবে তৈরি করুন আপনার সমস্ত বৈশিষ্ট্যকে অবশ্যই বিভিন্ন ইউআরএল প্যারামিটার হিসাবে রাখতে হবে। কৌণিক- ui- রাউটার ডেভস এখনও পুরো বস্তুটি পাস করার জন্য কাজ করছে। আসলে যে ছেলেরা স্লাটোপ্লুক লেডেল একটি দুর্দান্ত সমাধান দিয়েছেন। কেবলমাত্র পুরো জসন স্ট্রিং হিসাবে অবজেক্টটি তৈরি করুন এবং তারপরে পার্স করুন। :)
টেক

13

বিটিডব্লিউ আপনি অবজেক্টগুলি পাস করার জন্য আপনার টেম্পলেটগুলিতে ui-sref বৈশিষ্ট্যটিও ব্যবহার করতে পারেন

ui-sref="myState({ myParam: myObject })"

1
আমরা কীভাবে এই বিষয়টিকে স্টেটে পেলাম
শুভম

@ শুভম আপনি রাষ্ট্রটির জন্য 'পরম' কনফিগার করবেন যা এই বস্তুটি গ্রহণ করবে, তারপরে that stateParams ব্যবহার করে সেই বস্তুটি পুনরুদ্ধার করবে। বিশদটির জন্য ডকটি কৌণিক-ui.github.io/ui-router/site/#/api/… দেখুন ।
তাও

এটি কাজ করে তবে পৃষ্ঠা সতেজ হওয়ার পরে ডেটা রাখতে পারে না।
তাও

9

1)

$stateProvider
        .state('app.example1', {
                url: '/example',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/example.html',
                        controller: 'ExampleCtrl'
                    }
                }
            })
            .state('app.example2', {
                url: '/example2/:object',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/example2.html',
                        controller: 'Example2Ctrl'
                    }
                }
            })

2)

.controller('ExampleCtrl', function ($state, $scope, UserService) {


        $scope.goExample2 = function (obj) {

            $state.go("app.example2", {object: JSON.stringify(obj)});
        }

    })
    .controller('Example2Ctrl', function ($state, $scope, $stateParams) {

        console.log(JSON.parse($state.params.object));


    })

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