ui-router:当 $state.go 到子状态时父视图消失 [英] ui-router: parent view disappeared when $state.go to child state

问题描述

我正在尝试通过为每个导航节点递归创建状态(导航数据从服务器的数据库中读取)来为我的左侧导航面板动态创建导航树.

模板:

忽略取数据并启动navPanel代码，下面是navTree状态定义代码:

let st_navTree = {name: '导航树',参数:{节点列表:[]},控制器:['$transition$'、'runtimeStates'、'$state'、函数($transition$、runtimeStates、$state){ctrl = 这个；ctrl.nodeList = $transition$.params().nodeList;ctrl.newState = 函数(节点){让 subStateName = $state.current.name + '.'+ 节点名；runtimeStates.newState(subStateName, st_navTree);$state.go(subStateName, {nodeList: node.children});};}],controllerAs: '$ctrl',模板网址:'导航树'};

动态生成新状态的代码(从此处学习):

app.provider('runtimeStates', ['$stateProvider', function ($stateProvider) {this.$get = 函数 () {返回 {新状态:函数(名称，状态){$stateProvider.state(name, state);}};};}]);

当前的问题是(最近需要解决其他问题，例如重新创建状态):

虽然我可以在导航面板中看到顶级导航列表；但是当我通过单击导航节点进入子菜单时，而不是在父视图下添加子视图，整个导航面板的内容更改为子状态的视图，并且所有父级视图都消失了.

我看到另一个线程 并在评论中如果您使用 $state.go 或 $state.transitionTo 更改状态，这将不起作用.使用 ui-sref 可以正常工作."我担心 $state.go 无法在父视图保留的情况下转到子状态.

我正在考虑改成ui-sref版本，但是动态路由会是一个新问题，我还是不知道.

解决方案

这肯定是一个非典型用例...通常如果 URL 中的事物是动态的，我会将其视为查询/状态参数，但如果您真的希望动态生成 URL，它似乎现在已融入新版本的 UI-Router 或可在 ui-router extras 中使用，如下所述:

Angular - UI 路由器 - 以编程方式添加状态

https://ui-router.github.io/ng1/docs/latest/modules/injectables.html#_stateregistry

I'm trying to dynamically create a navigation tree for my left-side nav-panel by recursively creating states for each nav-node (the navigation data is reading from the server's DB).

The template:

<script type="text/ng-template" id="navTree">
  <ul class="nav flex-sm-column">
    <li ng-repeat="node in $ctrl.nodeList">
      <div ng-click="$ctrl.newState(node)">
        <span class="{{node.class}}"></span>&nbsp;{{node.title}}
      </div>
      <div ng-if="node.children.length > 0" ui-view>
      </div>
    </li>
  </ul>
</script>

Ignoring the fetching data and initiating navPanel code, bellow is the navTree state definition code:

let st_navTree = {
  name: 'navTree',
  params: {
    nodeList: []
  },
  controller: ['$transition$', 'runtimeStates', '$state', function ($transition$, runtimeStates, $state) {
    ctrl = this;
    ctrl.nodeList = $transition$.params().nodeList;
    ctrl.newState = function (node) {
      let subStateName = $state.current.name + '.' + node.name;
      runtimeStates.newState(subStateName, st_navTree);
      $state.go(subStateName, {nodeList: node.children});
    };
  }],
  controllerAs: '$ctrl',
  templateUrl: 'navTree'
};

The code that dynamically generating new states (learning from here):

app.provider('runtimeStates', ['$stateProvider', function ($stateProvider) {
  this.$get = function () {
    return {
      newState: function (name, state) {
        $stateProvider.state(name, state);
      }
    };
  };
}]);

The immediate problem is (other problems like re-creating states need to be solved lately):

Although I can see the top level nav-list in the nav-panel; but when I go into the sub menu by clicking an nav-node, instead of adding a sub-view under the parent view, the whole nav-panel's content changes to the sub-state's view, and all parent level views are gone.

I saw another thread and in the comments "this does not work if you change the states with $state.go or $state.transitionTo. Works fine with ui-sref." I worry that $state.go cannot go to the child-state with the parent-view remains.

I'm thinking to change it to ui-sref version, but the dynamic routing will be a new problem which I still have no idea.

解决方案

This is an atypical use case for sure... typically if the thing in the URL is dynamic I would be treating it as a query/state parameter but if you really want to have the URLs be dynamically generated it appears this is now baked into the newer versions of UI-Router or available in the ui-router extras as explained here:

Angular - UI Router - programmatically add states

https://ui-router.github.io/ng1/docs/latest/modules/injectables.html#_stateregistry

这篇关于ui-router:当 $state.go 到子状态时父视图消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！