বর্তমান রাষ্ট্রের পূর্ববর্তী অবস্থা পাওয়ার কোনও উপায় আছে কি?
উদাহরণস্বরূপ আমি জানতে চাই বর্তমান রাষ্ট্র বি এর আগে পূর্বের অবস্থাটি কী ছিল (যেখানে পূর্ববর্তী রাষ্ট্রটি রাজ্য এ হত)।
আমি এটি ইউআই-রাউটার গিথুব ডক পৃষ্ঠাগুলিতে খুঁজে পাচ্ছি না।
উত্তর:
ইউআই-রাউটারটি পূর্ববর্তী অবস্থানে একবার রূপান্তরিত হলে এটি ট্র্যাক করে না, তবে ঘটনাটি যখন রাষ্ট্র পরিবর্তন $stateChangeSuccessহয় $rootScopeতখন প্রচার করা হয় ।
আপনারা সেই ইভেন্টটি থেকে পূর্বের অবস্থাটি ধরতে সক্ষম হবেন ( fromআপনি যে রাজ্যে চলে যাচ্ছেন):
$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
//assign the "from" parameter to something
});আমি নতুন রাজ্যে যাওয়ার আগে বর্তমান রাষ্ট্রের ডেটা সংরক্ষণ করার সংকল্প ব্যবহার করি:
angular.module('MyModule')
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('mystate', {
templateUrl: 'mytemplate.html',
controller: ["PreviousState", function (PreviousState) {
if (PreviousState.Name == "mystate") {
// ...
}
}],
resolve: {
PreviousState: ["$state", function ($state) {
var currentStateData = {
Name: $state.current.name,
Params: $state.params,
URL: $state.href($state.current.name, $state.params)
};
return currentStateData;
}]
}
});
}]);$stateChangeSuccess
$stateChangeSuccessকাজ করে, এটি বিশ্বব্যাপী এটি করে, যা বেশিরভাগ সময় সত্যই প্রয়োজন হয় না।
$state.currentবস্তুর হল: {name: "", url: "^", views: null, abstract: true}।
পঠনযোগ্যতার জন্য, আমি আমার সমাধানটি এখানে রাখছি (stu.sssbury এর anwser এর ভিত্তিতে)।
আপনার কোডটির বিমূর্ত টেম্পলেটে এই কোডটি যুক্ত করুন যাতে এটি প্রতিটি পৃষ্ঠায় চলে।
$rootScope.previousState;
$rootScope.currentState;
$rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from, fromParams) {
$rootScope.previousState = from.name;
$rootScope.currentState = to.name;
console.log('Previous state:'+$rootScope.previousState)
console.log('Current state:'+$rootScope.currentState)
});রুটস্কোপের পরিবর্তনের উপর নজর রাখে। এটি বেশ সহজ।
নিম্নলিখিত উদাহরণে আমি একটি তৈরি করেছি decorator(কনফিগারেশন পর্যায়ে কেবলমাত্র অ্যাপ্লিকেশন প্রতি একবার রান করে) এবং $stateসেবার জন্য একটি অতিরিক্ত সম্পত্তি যুক্ত করে , তাই এই পদ্ধতির গ্লোবাল ভেরিয়েবল যুক্ত $rootscopeহয় না এবং এর চেয়ে অন্যান্য পরিষেবায় কোনও অতিরিক্ত নির্ভরতা যুক্ত করার প্রয়োজন হয় না $state।
আমার উদাহরণস্বরূপ আমাকে যখন ব্যবহারকারী ইতিমধ্যে সাইন ইন হয়ে গিয়েছিল এবং সাইন ইন করার পরে তাকে পূর্ববর্তী "সুরক্ষিত" পৃষ্ঠায় পুনর্নির্দেশ না করা উচিত তখন আমাকে সূচী পৃষ্ঠায় পুনর্নির্দেশ করা দরকার।
শুধুমাত্র অজানা পরিষেবা (আপনার জন্য) যে আমি ব্যবহার হয় authenticationFactoryএবং appSettings:
authenticationFactoryকেবল ব্যবহারকারী লগইন পরিচালনা করে। এই ক্ষেত্রে আমি সনাক্ত করতে শুধুমাত্র একটি পদ্ধতি ব্যবহার করি যদি ব্যবহারকারী লগ ইন থাকে বা না থাকে।appSettingsকেবল সর্বত্র স্ট্রিং ব্যবহার না করার জন্য ধ্রুবক। appSettings.states.loginএবং appSettings.states.registerলগইন এবং url নিবন্ধের জন্য রাষ্ট্রের নাম ধারণ করে।তারপরে যে কোনও controller/ serviceইত্যাদিতে আপনাকে $stateপরিষেবা ইনজেক্ট করতে হবে এবং আপনি বর্তমান এবং পূর্ববর্তী ইউআরএলটি এইভাবে অ্যাক্সেস করতে পারেন:
$state.current.name$state.previous.route.nameChrome কনসোল থেকে:
var injector = angular.element(document.body).injector();
var $state = injector.get("$state");
$state.current.name;
$state.previous.route.name;বাস্তবায়ন:
(আমি ব্যবহার করছি angular-ui-router v0.2.17এবং angularjs v1.4.9)
(function(angular) {
"use strict";
function $stateDecorator($delegate, $injector, $rootScope, appSettings) {
function decorated$State() {
var $state = $delegate;
$state.previous = undefined;
$rootScope.$on("$stateChangeSuccess", function (ev, to, toParams, from, fromParams) {
$state.previous = { route: from, routeParams: fromParams }
});
$rootScope.$on("$stateChangeStart", function (event, toState/*, toParams, fromState, fromParams*/) {
var authenticationFactory = $injector.get("authenticationFactory");
if ((toState.name === appSettings.states.login || toState.name === appSettings.states.register) && authenticationFactory.isUserLoggedIn()) {
event.preventDefault();
$state.go(appSettings.states.index);
}
});
return $state;
}
return decorated$State();
}
$stateDecorator.$inject = ["$delegate", "$injector", "$rootScope", "appSettings"];
angular
.module("app.core")
.decorator("$state", $stateDecorator);
})(angular);C stateChangeStart- এ $ state- এ। State called নামে একটি নতুন সম্পত্তি যুক্ত করুন
$rootScope.$on( '$stateChangeStart', ( event, to, toParams, from, fromParams ) => {
// Add {fromParams} to {from}
from.params = fromParams;
// Assign {from} to {previous} in $state
$state.previous = from;
...
}এখন আপনি যে কোনও জায়গায় প্রয়োজন need রাজ্যটি ব্যবহার করতে পারবেন আপনার কাছে পূর্বের উপলব্ধ
previous:Object
name:"route name"
params:Object
someParam:"someValue"
resolve:Object
template:"route template"
url:"/route path/:someParam"এবং এটি এর মতো ব্যবহার করুন:
$state.go( $state.previous.name, $state.previous.params );আমি একই ইস্যুতে আটকে আছি এবং এটি করার সবচেয়ে সহজ উপায়টি ...
//Html
<button type="button" onclick="history.back()">Back</button>অথবা
//Html
<button type="button" ng-click="goBack()">Back</button>
//JS
$scope.goBack = function() {
window.history.back();
};(আপনি যদি এটি আরও পরীক্ষামূলক হতে চান তবে আপনার নিয়ামকটিতে $ উইন্ডো পরিষেবাটি ইনজেক্ট করুন এবং $ উইন্ডো হিস্ট্রি.ব্যাক ()) ব্যবহার করুন।
আমি এন্ডি তেজহোনো যা করে তার অনুরূপ পন্থা ব্যবহার করি।
আমি যা করি তা হ'ল রূপান্তর করার আগে বর্তমান রাষ্ট্রের মান সংরক্ষণ করা। একটি উদাহরণ দেখা যাক; এই রূপান্তরটি কল্পনা করুন যা কোনও ক্রান্তিকালীন ঘটায় তা ক্লিপ করার সময় সম্পাদিত হয়:
$state.go( 'state-whatever', { previousState : { name : $state.current.name } }, {} );এখানে কীটি হ'ল প্যারাম অবজেক্ট (প্যারামিটারগুলির একটি মানচিত্র যা রাজ্যে প্রেরণ করা হবে) -> { previousState : { name : $state.current.name } }
দ্রষ্টব্য: নোট করুন যে আমি কেবলমাত্র saving রাষ্ট্রীয় অবজেক্টের নাম গুণটি "সংরক্ষণ" করছি, কারণ রাষ্ট্রটি সংরক্ষণ করার জন্য আমার একমাত্র জিনিস প্রয়োজন। তবে আমরা পুরো রাষ্ট্রের উদ্দেশ্য থাকতে পারি।
তারপরে, "যাই হোক না কেন" এর মতো সংজ্ঞায়িত হয়ে উঠুন:
.state( 'user-edit', {
url : 'whatever'
templateUrl : 'whatever',
controller: 'whateverController as whateverController',
params : {
previousState: null,
}
});এখানে, মূল পয়েন্টটি হ'ল প্যারাম অবজেক্ট।
params : {
previousState: null,
}তারপরে, সেই রাজ্যের অভ্যন্তরে আমরা পূর্বের অবস্থাটি এর মতো পেতে পারি:
$state.params.previousState.nameক্রিস থিলেন ইউআই-রাউটার-অতিরিক্তগুলি থেকে এখানে একটি সত্যিই মার্জিত সমাধান : $ পূর্ববর্তী স্টেট
var previous = $previousState.get(); //Gets a reference to the previous state.previousদেখতে এমন একটি বস্তু যা দেখে মনে হচ্ছে: { state: fromState, params: fromParams }যেখানে স্টেটটি পূর্বের রাজ্য এবং থেকে প্যারামগুলি পূর্ববর্তী রাষ্ট্রের পরামিতি।
ঠিক আছে, আমি জানি যে আমি এখানে পার্টিতে দেরি করেছি, তবে আমি কৌণিকভাবে নতুন। আমি এখানে জন পাপা স্টাইল গাইডের মধ্যে এটি ফিট করার চেষ্টা করছি । আমি এটি পুনরায় ব্যবহারযোগ্য করে তুলতে চাই যাতে আমি একটি ব্লকে তৈরি করেছিলাম। আমি এখানে যা এলাম:
previousStateProvider
(function () {
'use strict';
angular.module('blocks.previousState')
.provider('previousState', previousStateProvider);
previousStateProvider.$inject = ['$rootScopeProvider'];
function previousStateProvider($rootScopeProvider) {
this.$get = PreviousState;
PreviousState.$inject = ['$rootScope'];
/* @ngInject */
function PreviousState($rootScope) {
$rootScope.previousParms;
$rootScope.previousState;
$rootScope.currentState;
$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
$rootScope.previousParms = fromParams;
$rootScope.previousState = from.name;
$rootScope.currentState = to.name;
});
}
}
})();core.module
(function () {
'use strict';
angular.module('myApp.Core', [
// Angular modules
'ngMessages',
'ngResource',
// Custom modules
'blocks.previousState',
'blocks.router'
// 3rd Party Modules
]);
})();core.config
(function () {
'use strict';
var core = angular.module('myApp.Core');
core.run(appRun);
function appRun(previousState) {
// do nothing. just instantiating the state handler
}
})();এই কোডটিতে যে কোনও সমালোচনা কেবল আমাকে সহায়তা করবে, তাই দয়া করে আমাকে জানান যে আমি এই কোডটি কোথায় উন্নত করতে পারি।
আপনার যদি কেবল এই কার্যকারিতাটির প্রয়োজন হয় এবং এটি একাধিক নিয়ামক হিসাবে এটি ব্যবহার করতে চান, রুটের ইতিহাস ট্র্যাক করার জন্য এটি একটি সহজ পরিষেবা:
(function () {
'use strict';
angular
.module('core')
.factory('RouterTracker', RouterTracker);
function RouterTracker($rootScope) {
var routeHistory = [];
var service = {
getRouteHistory: getRouteHistory
};
$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
routeHistory.push({route: from, routeParams: fromParams});
});
function getRouteHistory() {
return routeHistory;
}
return service;
}
})();যেখানে মডেল ('কোর') এর 'কোর' আপনার অ্যাপ্লিকেশন / মডিউলটির নাম হবে। আপনার নিয়ামকের উপর নির্ভরতা হিসাবে পরিষেবাটি প্রয়োজন, তারপরে আপনার নিয়ামকটিতে আপনি এটি করতে পারেন:$scope.routeHistory = RouterTracker.getRouteHistory()
আমি states রুটস্কোপে পূর্ববর্তী রাজ্যগুলির উপর নজর রাখি , সুতরাং যখনই প্রয়োজন হবে আমি নীচের কোডের কোডটি কল করব।
$state.go($rootScope.previousState);ইন App.js :
$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) {
$rootScope.previousState = from.name;
});ইউআই-রাউটারের জন্য (> = 1.0), স্টেট চেঞ্জ ইভেন্টগুলি হ্রাস করা হয়েছে। সম্পূর্ণ মাইগ্রেশন গাইডের জন্য, এখানে ক্লিক করুন
ইউআই-রাউটার ০.০++ এ বর্তমান রাজ্যের আগের অবস্থাটি পেতে:
app.run(function ($transitions) {
$transitions.onSuccess({}, function (trans) {
// previous state and paramaters
var previousState = trans.from().name;
var previousStateParameters = trans.params('from');
});
});সত্যিই সহজ সমাধান হ'ল $ state.current.name স্ট্রিংটি সম্পাদনা করা এবং সর্বশেষ 'এবং এর পরে সমস্ত কিছু কেটে নেওয়া।' - আপনি প্যারেন্ট রাষ্ট্রের নাম পান। আপনি রাজ্যের মধ্যে প্রচুর ঝাঁপ দিলে এটি কাজ করে না কারণ এটি কেবল বর্তমান পথকে বিশ্লেষণ করে। তবে যদি আপনার রাজ্যগুলি আপনি যেখানে প্রকৃতির সাথে সামঞ্জস্য করেন তবে এটি কাজ করে।
var previousState = $state.current.name.substring(0, $state.current.name.lastIndexOf('.'))
$state.go(previousState)$state.go('^')এটি সম্পাদন করবে
আপনি এইভাবে রাজ্যটি ফিরিয়ে দিতে পারবেন:
$state.go($state.$current.parent.self.name, $state.params);একটি উদাহরণ:
(function() {
'use strict'
angular.module('app')
.run(Run);
/* @ngInject */
function Run($rootScope, $state) {
$rootScope.back = function() {
$state.go($state.$current.parent.self.name, $state.params);
};
};
})();