javascript - ionic : how to have multiple tabs on the same template?

Question

我想要多个 ion 选项卡，这些选项卡指向同一 View ，只需更改 URL 中的参数即可。

我无法做到这一点，页面加载，当我单击两个选项卡时，浏览器加载/tab/dash/all...

HTML:

<ion-tabs class="tabs-icon-top">

  <!-- Dashboard Tab -->
  <ion-tab title="All" icon="icon ion-grid" href="#/tab/dash/all">
    <ion-nav-view name="tab-articles-all"></ion-nav-view>
  </ion-tab>

  <ion-tab title="New" icon="icon ion-wand" href="#/tab/dash/new">
    <ion-nav-view name="tab-articles-new"></ion-nav-view>
  </ion-tab>

</ion-tabs>

JS:

$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
})

// Each tab has its own nav history stack:

.state('tab.dash', {
  url: '/dash/:filter',
  views: {
    'tab-articles-all': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    },
    'tab-articles-new': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }}
  })

HTML:

Answer 1

如果您知道过滤器参数的名称，那么为什么不为每个参数创建单独的状态呢？查看您的示例标记，您应该能够拥有像这样的状态配置。

$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
})

// Each tab has its own nav history stack:

.state('tab.dash-all', {
  url: '/dash/all',
  views: {
    'tab-articles-all': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }
  }
})
.state('tab.dash-new', {
  url: '/dash/new/',
  views: {
    'tab-articles-new': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }
  }
});

如果您在应用启动时不知道所有可能的 :filter 参数。您可以使用 $stateNotFound 事件捕获参数来动态添加状态，然后根据参数创建一个状态并转到它。