Question

我在angular-ui-router有一条有儿童路线的路线;我想要在父路线上只能看到那些子路线的链接。它们出现在整个应用程序可见的菜单上，但每个链接都依赖于父项中的url参数来工作，因此当该参数不存在时，它们必须不可点击。

所以，设置是这样的;

.state('route1', {
   url: '/route1/:id',
   views: { 'main@': { template: '<route1-component></route1-component>' } }
})
.state('route1.child1', {
   url: '/child1',
   views: { 'main@': { template: '<route1-child1-component></route1-child1-component>' } }
})

我已经使用ui-sref与ui-sref-active-eq结合使用此布局来隐藏它们的功能......

<div ui-sref="route1" ui-sref-active-eq="visible" hidden>
   <a ui-sref="route1.child1" ui-sref-opts="{ location: true, inherit: true, relative: true }">CHILD 1</a>
</div>

一开始工作正常;该链接仅在我们位于route1路线时可见。它显示的网址为#/route1/1/child1，包括当前网址的:id参数。

但是，当我点击该链接时，该网址会暂时闪烁为#/route1/1/child1，但随后会再次route1呈现。

如果我删除ui-sref-active-eq部分，它会正确路由到子路由。但后来我遇到了不被隐藏的问题。

有什么可以做的吗？

请注意，我使用完全角度1.5+ 组件。我根本不使用普通控制器或指令。这都是100％的组件。

这不是很完美，但这是事物布局的一个例子，我试图说清楚它们是如何运作的。我似乎无法在指令中获得$state来观察变化。 https://plnkr.co/edit/rxjVbckhwxdYPRAX4uiU?p=preview

Answer 1

在向sidenav组件添加控制器并使用$stateChangeSuccess事件和$state.includes()更新传递给ng-show的布尔值

  .component('sidenav', {
    controller: function ($rootScope,$state) {
      var vm = this;
      vm.isRoute1=$state.includes('route1');
      $rootScope.$on('$stateChangeSuccess', function(evt, to, from){
          vm.isRoute1=$state.includes('route1');
      });            
   },
    template: `
        <div  ng-show="$ctrl.isRoute1">
          <a ui-sref="route1.child1" ui-sref-opts="{ location: true, inherit: true, relative: true }">
            ROUTE 1 CHILD 1 LINK
          </a>
        </div>`

  })

我认为这是你想要的行为......虽然不是100％确定

的 DEMO

当使用ui-sref-active-eq时，子路由保持触发父级（angular-ui-router）

1 个答案: