web-dev-qa-db-ja.com

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

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

私の目的は、ページの読み込み時にデフォルトのタブを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'}
})

ここで plunker demo を作成しました。

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

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

javascriptangularjstabsangular-ui-router
85
Leo

Update：1.0以降は、すぐにredirectToをサポートします。

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

ここの例 を作成しました。

この解決策は、.when()（ https://stackoverflow.com/a/27131114/167931 ）と本当にクールなソリューション（クリスTによる、しかし元の投稿はyahyaKacemによる）

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

まず、リダイレクト設定で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'})
      }
    });
}]);

このようにして、デフォルトのリダイレクトで状態を調整できます...チェックしてください here

編集：@Alecによるコメントのオプションを追加して、ブラウザーの履歴を保持します。

164
Radim Köhler

実際、Radimによって提案されたこのソリューションが正確に仕事をしたとしても、すべてのタブのサブタブ（状態）を覚えておく必要がありました。

それで、同じことをするが、すべてのタブのサブステートを記憶する別のソリューションを見つけました。

i-router-extras をインストールして deep state redirect 機能を使用するだけでした：

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

ありがとうございました！

21
Leo

バージョン1. のui-routerでは、redirectToプロパティをサポートしています。例えば：

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

Ui-routerのバージョン1.0以降、例に示すようにIHookRegistry.onBefore（）を使用してデフォルトのフックが導入されましたData Driven Default Substate in http://angular-ui.github.io/ui-router/feature-1.0/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);
});
6
ThmX

誰かが州に簡単なリダイレクトを実装する方法に関する答えを求めてここに来て、私に起こったように、新しいルーターを使用する機会がない場合...

明らかに、できれば再び、@ bblackwoの答えは素晴らしいです。

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

手動でリダイレクトできない場合：

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

私はそれが役立つことを願っています！

1
Jose Daniel Vivar Personat
app.config(function($stateProvider,$urlRouterProvider){

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

    })
1
shubam yadav