angularjs ui-router:获取给定状态的子状态列表 [英] angularjs ui-router: Get list of child states of a given state

问题描述

您知道在 ui-router 中获取给定状态的子状态列表的方法吗?

Do you know a way in ui-router to get the list of child states of a given state?

我正在使用 ui-router 实现一个复杂的 SPA，可能有 4 级深度导航.

I'm implementing a complex SPA with maybe 4 level deep navigation using ui-router.

我想为从路由器表自动生成的第二级实现导航选项卡界面.

I would like to implement a navigation tab interface for the second level generated automatically from the router table.

为此，我需要获取给定状态(可能是抽象状态)的直接子级列表.我发现获取状态的唯一方法是执行 $state.get() 并获取状态的完整列表，但这意味着我必须解析子状态我自己的，我认为那是已经用 ui-router 编写的代码.

For that, I need to get the list of direct children of a given state (maybe is an abstract state). The only way that I've found to get the states is to do a $state.get() and obtain the full list of states, but that means that I'll have to parse child states on my own, and I think that's code already written in ui-router.

我在这里提出这个问题，以防有人在源代码方面有经验或知道插件或模块可以帮助我解决这个问题.同时我会自己做一个研究，如果我发现了什么，我会发布结果.

I let this question here in case there's anyone with experience in the source code or know of a plugin or module that can help me on this. Meanwhile I will do a research on my own and post results if I find something.

推荐答案

最后，不得不自己实现功能.

In the end, had to implement the functionality myself.

在具有选项卡界面的抽象路由的控制器中，利用路由的默认命名约定使用正则表达式过滤状态:

In the controller of the abstract route that has the tab interface, filtered the states using a regular expression taking advantage of the default naming convention for routes:

var routeName='Root.Parent'; // this is the "actual" route

// this regex is going to filter only direct childs of this route.
var secondRouteOnlyRegex = new RegExp(routeName + "\.[a-z]+$", "i");
var states = $state.get();

// this uses lodash to filter the states based on the regex
var navLinks = _.filter(states, (s) => {
    return secondRouteOnlyRegex.test(s.name) && !s.abstract;
});
$scope.tabs = navlinks;

我的路由定义有一个 data 属性，其中包含呈现选项卡所需的标题和其他元数据.

My route definitions have a data property that contains the title and other metadata needed to render the tabs.

我的模板看起来像这样(使用引导程序):

My template looks something like this (using bootstrap):

<ul class="nav nav-tabs">
    <li ng-repeat="state in tabs" ui-sref-active="active">
        <a href="{{state.url}}" ui-sref="{{state.name}}">{{state.data.title}}</a>
    </li>
</ul>

这篇关于angularjs ui-router:获取给定状态的子状态列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！