เปลี่ยนเส้นทางสถานะไปยังวัสดุรองเริ่มต้นด้วย UI-Router ใน AngularJS

ฉันกำลังสร้างหน้าตามแท็บซึ่งแสดงข้อมูลบางอย่าง ฉันใช้ UI-Router ใน 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'}
})

นี่ฉันสร้างสาธิต plunker

ตอนนี้ทุกอย่างใช้งานได้ยกเว้นฉันไม่ได้เปิดแท็บเริ่มต้นและนั่นคือสิ่งที่ฉันต้องการ

ขอบคุณสำหรับข้อเสนอแนะความคิดเห็นและแนวคิด

อัปเดต: 1.0 เป็นต้นไปรองรับการเปลี่ยนเส้นทางเพื่อออกจากกล่อง

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

ฉันสร้างตัวอย่างที่นี่ตัวอย่างที่นี่

วิธีแก้ปัญหานี้มาจาก "ความคิดเห็น" ที่ดีไปจนถึงปัญหาเกี่ยวกับการเปลี่ยนเส้นทางโดยใช้.when() ( https://stackoverflow.com/a/27131114/1679310 )และวิธีแก้ปัญหาที่ยอดเยี่ยมมาก(โดย Chris T แต่โพสต์ต้นฉบับโดย yahyaKacem)

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

ก่อนอื่นมาขยาย main ด้วยการตั้งค่าการเปลี่ยนเส้นทาง:

$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'})
      }
    });
}]);

ด้วยวิธีนี้เราสามารถปรับสถานะของเราด้วยการเปลี่ยนเส้นทางเริ่มต้น ... ตรวจสอบได้ที่นี่

แก้ไข: เพิ่มตัวเลือกจากความคิดเห็นโดย @Alec เพื่อรักษาประวัติเบราว์เซอร์

ในความเป็นจริงแม้ว่าโซลูชันนี้ที่เสนอโดยRadimจะทำงานได้ดี แต่ฉันก็ต้องจำแท็บย่อย (สถานะ) ของทุกแท็บ

ดังนั้นฉันจึงพบวิธีแก้ปัญหาอื่นที่ทำสิ่งเดียวกัน แต่ยังจำทุกแท็บย่อยด้วย

สิ่งที่ฉันต้องทำคือติดตั้งui-router-extrasและใช้คุณสมบัติdeep state redirect :

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

ขอขอบคุณ!

สำหรับui-router เวอร์ชัน 1.0จะรองรับredirectToคุณสมบัติ ตัวอย่างเช่น:

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

นับตั้งแต่ ui-router เวอร์ชัน 1.0 เป็นต้นมามีการนำ hook เริ่มต้นโดยใช้IHookRegistry.onBefore ()ตามที่แสดงในตัวอย่างData Driven Default Substateในhttp://angular-ui.github.io/ui-router/feature-1.0/ อินเทอร์เฟซ / การเปลี่ยนแปลง ihookregistry.html # onbefore

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

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

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

    })

หากมีคนมาที่นี่เพื่อขอคำตอบเกี่ยวกับวิธีใช้การเปลี่ยนเส้นทางอย่างง่ายสำหรับสถานะและอย่างที่เกิดขึ้นกับฉันไม่มีโอกาสใช้เราเตอร์ใหม่ ...

แน่นอนอีกครั้งถ้าคุณทำได้คำตอบ @bblackwo นั้นยอดเยี่ยม:

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

หากคุณไม่สามารถเปลี่ยนเส้นทางได้ด้วยตนเอง:

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

ฉันหวังว่ามันจะช่วยได้!