在没有每个选项卡状态的 ui-router 应用程序中使用选项卡

【问题标题】：using tabs in a ui-router app without states for each tab在没有每个选项卡状态的 ui-router 应用程序中使用选项卡
【发布时间】：2017-02-11 01:40:48
【问题描述】：

我目前正在开发一个带有 ui-router 的 Angular 应用程序，并希望在一个视图中使用选项卡。由于典型的选项卡实现涉及使用相对链接 (#tabId)，它与 ui-router 状态更改冲突。有没有办法实现选项卡而不必为每个选项卡创建状态？

提前谢谢你。

【问题讨论】：

【解决方案1】：

如果要更改url，请尝试使用查询字符串

state('app.sample', {
  url: '/sample?tab',
  params: {
    tab: {value: null, squash: true} // for make param optional
  }
}

或者像这样

state('app.sample', {
    url: '/sample/:tab',
    params: {
      tab: {value: null, squash: true}
    }
}

在控制器中，您可以使用 $stateParams 进行操作

$scope.currentTab = $stateParams.tab || 'defaultTab';

【讨论】：

【解决方案2】：

为了避免使用 href 属性，我不得不稍微修改一下代码，但我设法在小型设备上使用制表符以及将制表符转换为手风琴的自动机制。

【讨论】：