यूआई-राउटर का उपयोग करके किसी वस्तु को राज्य में कैसे पारित किया जाए?

Question

मैं यूआई-राउटर का उपयोग करके एक राज्य और एक मनमानी वस्तु को पारित करने में सक्षम होना चाहता हूं।

मुझे पता है कि आमतौर पर $stateParamsइसका उपयोग किया जाता है, लेकिन मेरा मानना ​​है कि यह मान URL में डाला गया है, और मैं नहीं चाहता कि उपयोगकर्ता इस डेटा को बुकमार्क कर सकें।

मैं ऐसा कुछ करना चाहता हूं।

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

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

क्या URL में मान एन्कोडिंग के बिना ऐसा करने का कोई तरीका है?

Comments

यूआई-राउटर तंत्र नेविगेशन के दौरान URL राज्यों को संरक्षित करता है। इस प्रकार, यदि कोई उपयोगकर्ता पृष्ठ को रीफ्रेश करता है, तो वह उस पेज पर वापस आ जाता है, जिसमें वह था। यदि आप इस व्यवहार का उपयोग नहीं करना चाहते हैं, तो अन्य मैकनैनिज्म (आपके नियंत्रक / निर्देशों, आदि में कच्चे कार्य) का उपयोग करने पर विचार करें और कुकीज़ / का उपयोग करें भंडारण के लिए अस्थायी डेटा

— नोज़ारू

शायद आपके डेटा की कुंजी के रूप में url के साथ लोकलस्टोरेज का उपयोग करें?

— नील

मूल्य कहां से आते हैं? Ui.router में अनुरोधित स्थिति में संक्रमण से पहले डेटा को एक दायरे पर लोड करने के लिए "संकल्प" की अवधारणा है। इसी तरह onEnter और onExit विधियाँ हैं। इसके अलावा, आप स्थानीय भंडारण का उपयोग कर सकते हैं।

— जोश सी।

जैसा कि @JoshC। उल्लेख किया है, लगता है कि आप एक राज्य में जाने से पहले डेटा को हल करना चाहते हैं। github.com/angular-ui/ui-router/wiki#resolve

— TrazeK

StackOverlord का उत्तर देखें कि इसे आधिकारिक रूप से कैसे किया जाए।

— एलिकएल्ज़िन-किलाका

Answer 1

संस्करण 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'}

myParam URL में दिखाई नहीं देगा।

स्रोत:

क्रिस्टोफरथिएलेन https://github.com/angular-ui/ui-router/issues/983 द्वारा टिप्पणी देखें , सुविधा के लिए यहाँ पुन: प्रस्तुत:

क्रिस्टोफरथिएलेन: हाँ, यह अब 0.2.13 में काम करना चाहिए।

.state ('foo', {url: '/ foo /: param1; param2', params: {param3: null} // null डिफ़ॉल्ट मान है});

$ state.go ('foo', {param1: 'bar', param2: 'baz', param3: {id: 35, name: 'what'}});

'फू' में $ राज्यप्रेम अब {परम 1: 'बार', परम 2: 'बाज', परम 3: {आईडी: 35, नाम: 'क्या'} है

url / / foo / bar है? param2 = baz

Comments

साथ transitionToही काम करता है ।

— एलिकएल्ज़िन-किलका

मुझे कुछ गलत करना चाहिए: - / मैं ०.२.१३ पर हूं, लेकिन अगर मैं इसे पास करने और वस्तु बनाने का प्रयास करता हूं तो यह राज्य में स्ट्रिंग के रूप में सामने आता है[object Object]

— ErichBSchulz

@ErichBSchulz हालांकि यह इस उत्तर में शामिल नहीं है, लेकिन इस काम को करने की चाल राज्य के URL स्ट्रिंग में पैरामीटर नाम और JSON के प्रकार को निर्दिष्ट करने सहित है। पूर्व। इस सुविधा के लिए 0.2.13 रिलीज नोट और कोड टिप्पणी $stateProvider.state('myState', { url: '/myState/{myParam:json}', params: {myParam: null},...देखें ।

— साइयन

मेरे पास अपने URL में एक आईडी परम था और साथ ही उस परम ऑब्जेक्ट को जोड़ना था। { url: '/mystate/{id:[0-9]+}', params: { id: null, myParam: null }, ...

— ग्राहमफ

खेलने के दौरान कुछ काला जादू होना चाहिए - मेरा पूरा

— जसन उर

Answer 2

इस समस्या के दो भाग हैं

1) एक पैरामीटर का उपयोग करना जो एक url को परिवर्तित नहीं करेगा (params संपत्ति का उपयोग करके):

$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);

Comments

वास्तव में वस्तुओं को पारित करने के लिए यह एक अच्छा हैक है :)

— Tek

हम सीधे वस्तु पास कर सकते हैं। स्वीकार किए गए उत्तर की जाँच करें

— किशोर रिलंगी

Answer 3

वास्तव में आप ऐसा कर सकते हैं।

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

यह State.go में विकल्पों के बारे में आधिकारिक दस्तावेज है

वहां सब कुछ वर्णित है और जैसा कि आप देख सकते हैं कि यह किया जाने वाला तरीका है।

Comments

मैंने इस सटीक कोड की कोशिश की और वस्तु संरक्षित नहीं है।

— विरमुंडी

आप उन वस्तुओं को पास नहीं कर सकते जिन्हें आप केवल एकल पैरामीटर मान पास कर सकते हैं .... यो इसे एक वस्तु के रूप में बनाएं जो आपको सभी गुणों को अलग-अलग यूआरएल मापदंडों के रूप में रखना होगा। कोणीय-यूआई-राउटर देव अभी भी पूरे ऑब्जेक्ट को पारित करने पर काम कर रहे हैं। वास्तव में उस लड़के Svatopluk Ledl ने एक अच्छा समाधान दिया। बस वस्तु को पूरे जॉगन स्ट्रिंग के रूप में बनाएं और उसके बाद इसे पार्स करें। :)

— Tek

Answer 4

Btw आप वस्तुओं को पास करने के लिए अपने टेम्पलेट में ui-sref विशेषता का भी उपयोग कर सकते हैं

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

Comments

हम इस वस्तु को .state में कैसे प्राप्त करते हैं

— शुभम

@ शुभम आप उस राज्य के लिए 'परम' को कॉन्फ़िगर करेंगे जो वस्तु प्राप्त करेगा, फिर उस वस्तु को पुनः प्राप्त करने के लिए $ राज्यप्रेम का उपयोग करेगा। विस्तार के लिए डॉक्टर कोणीय-ui.github.io/ui-router/site/#/api/… देखें ।

— ताओ

यह काम करता है लेकिन पेज को रिफ्रेश करने के बाद डेटा नहीं रख सकता है।

— ताओ

Answer 5

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));


    })

Answer 6

नहीं, URL हमेशा अद्यतन किया जाएगा जब params पास कर रहे हैं transitionTo।

इस पर होता है state.js: 698 में ui रूटर ।