如何在 ui-router angularjs 中保持父级相同的同时仅更改子级 ui-view？

Question

我在 index.html 中有一个ui-view。

在这个 ui 视图中，我添加了子 ui-view="child1"，它使用带有嵌套视图的 $stateProvider 状态可以正常工作。现在在选项卡开关上，我只想更改名为“child1”的子 ui-view，但保持父 ui-view 相同（因为我在同一页面上，只是页面的一部分正在更改）。

有什么方法可以使用路由来实现吗？我还想更改 url 参数，以便在刷新时知道打开了哪个选项卡，以便我可以使用路由打开相同的选项卡。

$stateProvider
    .state('main', {
      url: '/',
      views: {
        '': {
          templateUrl: 'assets/views/main.html',
          controller: 'mainInitCtrl',
        },
       'child1': {
          templateUrl: 'assets/views/child1.html',
          controller: 'childInitCtrl',
        }
      }
    });

Answer 1

您不仅应该尝试使用嵌套视图，还应该尝试使用嵌套状态。所以每个选项卡都会触发子状态。这样，父视图（未命名）将始终保持不变，而子视图将随着每个标签的点击而改变

// parent state main
.state('main', {
  url: '/',
  views: {
    '': {
      templateUrl: 'assets/views/main.html',
      controller: 'mainInitCtrl',
    },
  }
});
// select a tab1 and go to main.tab1 state
// parent view will stay, and "child1" view in index.html 
// will be replaced with content below
.state('main.tab1', {
  url: '/tab1',
   'child1@': {
      ...
    }
  }
})
// another tab
.state('main.tab2', {
  url: '/tab2',
   'child1@': {
      ...
    }
  }
})

与工作plunker类似的问答

Angular ui-router... Display default tab

但如果我们想让ui-view="child1" 位于未命名的ui-view 内 - 我们只需要进入父“主”状态模板

资产/视图/main.html：

<div>
  main content
  ...
  <div ui-view="child1"></div>
</div>

这更有意义，并且适合大多数情况。但是子状态定义现在必须针对父 'main' 而不是 index.html，如下所示：

.state('main.tab1', {
  url: '/tab1',
   //'child1@': {
   'child1': {
      ...
    }
  }
})
// another tab
.state('main.tab2', {
  url: '/tab2',
   //'child1@': {
   'child1': {
      ...
    }
  }
})