অ্যাঙ্গুলারজেএস-এ ইউআই-রাউটারের সাথে একটি রাষ্ট্রকে ডিফল্ট সাবস্টেটে পুনর্নির্দেশ করুন

Question

আমি একটি ট্যাব ভিত্তিক পৃষ্ঠা তৈরি করছি যা কিছু ডেটা দেখায়। আমি রাজ্যগুলি রেজিস্টার করতে AngularJs এ ইউআই-রাউটার ব্যবহার করছি।

আমার লক্ষ্য পৃষ্ঠা লোডে একটি ডিফল্ট ট্যাব খোলা। প্রতিটি ট্যাবে সাব ট্যাব থাকে এবং ট্যাবগুলি পরিবর্তন করার সময় আমি একটি ডিফল্ট সাব ট্যাব খুলতে চাই।

আমি onEnterফাংশনটি দিয়ে পরীক্ষা করছি এবং তার ভিতরে আমি ব্যবহার করছি $state.go('mainstate.substate');তবে এটি লুপ এফেক্ট ইস্যুগুলির কারণে কাজ করছে না বলে মনে হচ্ছে (state.go এ এটির প্যারেন্ট স্টেটকে ডেকে আনা এবং এটি লুপে পরিণত হয়)।

$stateProvider

.state('main', {
  url: '/main',
  templateUrl: 'main.html',
  onEnter: function($state) {
    $state.go('main.street');
  }
})

.state('main.street', {
  url: '/street',
  templateUrl: 'submenu.html',
  params: {tabName: 'street'}
})

এখানে আমি একটি প্লাঙ্কার ডেমো তৈরি করেছি ।

আপাতত সবকিছুই কাজ করে, কেবলমাত্র আমার ডিফল্ট ট্যাবটি খোলা নেই এবং এটিই আমার প্রয়োজন।

আপনার পরামর্শ, মতামত এবং ধারণা জন্য আপনাকে ধন্যবাদ।

Answer 1

আপডেট: 1.0 এর বাইরে বাক্সের বাইরে পুনর্নির্দেশকে সমর্থন করে।

https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto

---

আমি এখানে একটি উদাহরণ তৈরি করেছি ।

এই সমাধানটি .when() ( https://stackoverflow.com/a/27131114/1679310 ) ব্যবহার করে পুনঃনির্দেশ সহ একটি ইস্যুতে একটি দুর্দান্ত "মন্তব্য" থেকে এসেছে এবং এর জন্য সত্যই শীতল সমাধান রয়েছে (ক্রিস টি দ্বারা, তবে মূল পোস্টটি ইয়াহ্য্য ক্যাসেম দ্বারা হয়েছিল)

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

সুতরাং প্রথমে আসুন পুনর্নির্দেশ সেটিংয়ের সাথে প্রধান প্রসারিত করা যাক:

$stateProvider
    .state('main', {
      url: '/main',
      templateUrl: 'main.html',
      redirectTo: 'main.street',
    })

এবং চালানোর জন্য এই কয়েকটি লাইন যুক্ত করুন

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params, {location: 'replace'})
      }
    });
}]);

এইভাবে আমরা আমাদের কোনও রাজ্যকে এর ডিফল্ট পুনঃনির্দেশের সাথে সামঞ্জস্য করতে পারি ... এটি এখানে দেখুন Check

সম্পাদনা: ব্রাউজারের ইতিহাস সংরক্ষণের জন্য @ অ্যালেকের মন্তব্য থেকে বিকল্প যোগ করা হয়েছে।

Comments

এটি পিছনে বোতাম ক্লোবার বলে মনে হচ্ছে।

— স্কট তরোয়াল

@ সোর্ডফিশ0৩২১ পিছনের বোতামটি ঠিক করার জন্য, এই ছোট পরিবর্তনটি করুন: এর $state.go(to.redirectTo, params, {location: 'replace'});ফলে ইতিহাসে নতুন রাষ্ট্রটি পূর্বের রাষ্ট্রটি (যেমন আমাদের পুনঃনির্দেশিত হচ্ছে) প্রতিস্থাপন করবে। $ State.go এর

— অ্যালেক

আমি কেবল এটিই যুক্ত করতে চেয়েছিলাম যে এটি আমি যা করতে চেয়েছিলাম তার কাছাকাছি, কিন্তু আমি ডিফল্ট ইউআরএলটি এটি প্রতিস্থাপনের পরিবর্তে চেয়েছিলাম, এটি সহজেই পরিবর্তিত '$stateChangeStart'হয়ে সম্পাদিত হয়েছিল'$stateChangeSuccess'

— মট্টি দাম

ইউআই রাউটার 1.0 এটির সমর্থনে তৈরি করেছে: ui-router.github.io/guide/ng1/…

— গার্ট-জানুয়ারী

Answer 2

বাস্তবে রদিমের প্রস্তাবিত এই সমাধানটি ঠিক কাজটি করে থাকলেও আমার প্রতিটি ট্যাবের সাব ট্যাব (রাষ্ট্র) মনে রাখা দরকার।

সুতরাং আমি আরও একটি সমাধান পেয়েছি যা একই জিনিসটি করে তবে প্রতিটি ট্যাব সাবস্টেটকে মনে রাখে।

আমার সকলকে ইউআই-রাউটার-অতিরিক্ত ইনস্টল করা এবং গভীর রাজ্যের পুনর্নির্দেশ বৈশিষ্ট্যটি ব্যবহার করতে হয়েছিল :

$stateProvider
  .state('main.street', {
     url: '/main/street',
     templateUrl: 'main.html',
     deepStateRedirect: { default: { state: 'main.street.cloud' } },
  });

ধন্যবাদ!

Answer 3

ইউআই-রাউটারের 1.0 সংস্করণ হিসাবে এটি একটি redirectToসম্পত্তি সমর্থন করে । উদাহরণ স্বরূপ:

.state('A', {
  redirectTo: 'A.B'
})

Answer 4

সংস্করণের 1.0 UI-রাউটার সাল থেকে, একটি ডিফল্ট হুক ব্যবহার চালু করা হয়েছে IHookRegistry.onBefore () উদাহরণে প্রদর্শিত হিসাবে তথ্য ডিফল্ট Substate চালিত মধ্যে http://angular-ui.github.io/ui-router/feature-1.0/ ইন্টারফেস / ট্রানজিশন.ইহুক্রেগ্রিস্ট্রি। html # আগে

// state declaration
{
  name: 'home',
  template: '<div ui-view/>',
  defaultSubstate: 'home.dashboard'
}

var criteria = {
  to: function(state) {
    return state.defaultSubstate != null;
  }
}
$transitions.onBefore(criteria, function($transition$, $state) {
  return $state.target($transition$.to().defaultSubstate);
});

Comments

আমার জন্য এই ধরণের কাজ, যদিও, আমাকে এটি টুইট করতে হয়েছিল (এছাড়াও ES6 ব্যবহার করে)$transitions.onBefore({ to: state => state.defaultSubstate != null }, trans => trans.router.stateService.target(trans.to().defaultSubstate));

— ইয়র্ক

Answer 5

app.config(function($stateProvider,$urlRouterProvider){

    $urlRouterProvider.when("/state","/state/sub-state");

    })

Comments

এটি কী করে এবং ইতিমধ্যে বিদ্যমান উত্তরের চেয়ে কেন এটি ভাল তার একটি ব্যাখ্যা সরবরাহ করতে পারেন?

— সমমানের

এই সমাধানটি আমার পক্ষে সবচেয়ে সহজ এবং ভালভাবে কাজ করেছে।

— বুফএমসিবিগহিউজ

এটি এখন পর্যন্ত সেরা উত্তর। পরিবর্তন ইভেন্টগুলি ব্যবহার করার চেয়ে আরও সংক্ষিপ্ত। প্যাকেজ যুক্ত করার দরকার নেই। আমি জানি না যে এটি কারও কাছে কীভাবে পরিষ্কার নয়। আমি জানি না কীভাবে গৃহীত উত্তর এতটা উপরে উঠে যায়।

— কোডওয়ারিওর

Answer 6

যদি কেউ এখানে কোনও রাজ্যের জন্য কীভাবে একটি সাধারণ পুনর্নির্দেশ বাস্তবায়ন করতে পারে এবং যেভাবে আমার কাছে ঘটেছিল, নতুন রাউটার ব্যবহারের সুযোগ না পেয়ে কিভাবে উত্তর সম্পর্কে এখানে আসে ...

অবশ্যই আবার যদি আপনি পারেন তবে @ ব্ল্যাকউ উত্তরটি দুর্দান্ত:

$stateProvider.state('A', {
  redirectTo: 'B',
});

আপনি যদি না পারেন তবে ম্যানুয়ালি এটিকে পুনর্নির্দেশ করুন:

$stateProvider.state('A', {
  controller: $state => {
    $state.go('B');
  },
});

আমি আসা করি এটা সাহায্য করবে!