Javascript 使用 AngularJS 中的 UI-Router 将状态重定向到默认子状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29491079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Redirect a state to default substate with UI-Router in AngularJS
提问by Leo
I'm creating a tab based page which shows some data. I'm using UI-Router in AngularJs to register states.
我正在创建一个基于选项卡的页面，该页面显示一些数据。我在 AngularJs 中使用 UI-Router 来注册状态。
My aim is to have one default tab open on page load. Each tab have sub tabs, and I would like to have a default sub tab open when changing tabs.
我的目标是在页面加载时打开一个默认选项卡。每个选项卡都有子选项卡，我希望在更改选项卡时打开一个默认的子选项卡。
I was testing with onEnterfunction and inside I'm using $state.go('mainstate.substate');but it seems not to work due to loop effect issues (on state.go to substate it calls its parent state and so on, and it turns into a loop).
我正在测试onEnter函数和我正在使用的内部，$state.go('mainstate.substate');但由于循环效果问题，它似乎不起作用（在 state.go 到 substate 它调用其父状态等等，它变成了一个循环）。
$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'}
})
Here I created a plunker demo.
在这里，我创建了一个plunker 演示。
For now everything works, except that I don't have the default tab open and that's exactly what I need.
现在一切正常，除了我没有打开默认选项卡，这正是我需要的。
Thank you for your suggestions, opinions and ideas.
感谢您的建议、意见和想法。
回答by Radim K?hler
Update:1.0 Onwards Supports redirectTo out of the box.
更新：1.0 以后支持redirectTo 开箱即用。
https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto
https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto
I created an example here.
This solution comes from a nice "Comment" to an an issue with redirection using .when()(https://stackoverflow.com/a/27131114/1679310)and really cool solution for it (by Chris T, but the original post was by yahyaKacem)
这个解决方案来自一个很好的“评论”，使用重定向问题.when()（https://stackoverflow.com/a/27131114/1679310）和非常酷的解决方案（Chris T，但原始帖子是yahyaKacem）
https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373
https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373
So firstly let's extend main with redirection setting:
所以首先让我们使用重定向设置扩展 main：
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'main.html',
redirectTo: 'main.street',
})
And add only this few lines into run
并仅将这几行添加到运行中
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'})
}
});
}]);
This way we can adjust any of our states with its default redirection...Check it here
这样我们就可以用它的默认重定向来调整我们的任何状态......在这里检查
EDIT: Added option from comment by @Alec to preserve the browser history.
编辑：从@Alec 的评论中添加选项以保留浏览器历史记录。
回答by Leo
In fact even if this solution proposed by Radimdid exactly the job, I needed to remember every tab's sub tab (state).
事实上，即使Radim提出的这个解决方案完全可以胜任，我也需要记住每个选项卡的子选项卡（状态）。
So I found another solution which do the same thing but also remembers every tab substate.
所以我找到了另一个解决方案，它做同样的事情，但也记住每个选项卡子状态。
I all have to do was to install ui-router-extrasand use the deep state redirectfeature:
我所要做的就是安装ui-router-extras并使用深度状态重定向功能：
$stateProvider
.state('main.street', {
url: '/main/street',
templateUrl: 'main.html',
deepStateRedirect: { default: { state: 'main.street.cloud' } },
});
Thank you!
谢谢！
回答by BBlackwo
As of version 1.0of the ui-router it supports a redirectToproperty. For example:
从ui-router 的1.0 版开始，它支持一个redirectTo属性。例如：
.state('A', {
redirectTo: 'A.B'
})
回答by ThmX
Since version 1.0 of ui-router, a default hook has been introduced using IHookRegistry.onBefore()as demonstrated in the example Data Driven Default Substatein http://angular-ui.github.io/ui-router/feature-1.0/interfaces/transition.ihookregistry.html#onbefore
由于版本1.0 UI-路由器，默认钩已经使用引入IHookRegistry.onBefore（）所证明的示例数据驱动默认子状态中http://angular-ui.github.io/ui-router/feature-1.0/接口/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);
});
回答by shubam yadav
app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.when("/state","/state/sub-state");
})
回答by Jose Daniel Vivar Personat
If someone comes here for an answer regarding how to implement a simple redirect for a state and, as it happened to me, doesn't have the opportunity to use the new router...
如果有人来这里寻求有关如何为状态实现简单重定向的答案，并且就像我遇到的那样，没有机会使用新路由器......
Obviously again if you can, @bblackwo answer is great:
显然，如果可以的话，@bblackwo 的回答很棒：
$stateProvider.state('A', {
redirectTo: 'B',
});
If you can't then just manually redirect it:
如果你不能，那么只需手动重定向它：
$stateProvider.state('A', {
controller: $state => {
$state.go('B');
},
});
I hope it helps!
我希望它有帮助！
