AngularJSのUI-Routerを使用して状態をデフォルトのサブ状態にリダイレクトします

データを表示するタブベースのページを作成しています。AngularJsでUIルーターを使用して状態を登録しています。

私の目的は、ページの読み込み時に1つのデフォルトタブを開くことです。各タブにはサブタブがあり、タブを変更するときにデフォルトのサブタブを開いておきたいのですが。

私は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'}
})

ここで私はプランカーのデモを作成しました。

今のところ、デフォルトのタブを開いていないことを除いて、すべてが機能します。それがまさに私が必要としていることです。

提案、意見、アイデアをありがとうございます。

更新： 1.0以降そのままでredirectToをサポートします。

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

それで、最初にリダイレクト設定でメインを拡張しましょう：

$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をインストールし、ディープステートリダイレクト機能を使用することだけでした。

$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以降、http：//angular-ui.github.io/ui-router/feature-1.0/のデータドリブンデフォルトサブステートの例に示されているように、IHookRegistry.onBefore（）を使用してデフォルトフックが導入されています。interfaces / transition.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');
  },
});

お役に立てば幸いです。