标题中的离子导航选项卡 [英] Ionic navigation tab in header

问题描述

嘿，我有一个关于离子导航的问题，

Hey i've got a question about ionic navigation,

我的应用程序的主要导航在页脚中，但我想在页眉中添加一个信息选项卡，我也希望这个选项卡有自己的视图，所以我设置如下

The main navigation of my application is in the footer, but i want to add an information tab to the header, I also want this tab to have it's own view so i set it up as seen below

 <ion-nav-bar class="bar-stable nav-title-slide-ios7">
  <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
    Back
  </ion-nav-back-button>
  <ion-nav-buttons side="right">
    <ion-tabs class="tabs-icon-top">

    <!-- Info Tab -->
    <ion-nav-view>
      <ion-tab title="Info" icon="icon ion ion-android-information" href="#/info/informatie">
        <ion-nav-view name="info-informatie"></ion-nav-view>
      </ion-tab>
     </ion-tabs>
    </ion-nav-view>


  </ion-nav-buttons>
</ion-nav-bar>

我将 Angular 路由配置为这样的抽象类，

And I configured the Angular routing to an abstract class like this,

.state('info', {
  url: "/info",
  abstract: true,
  templateUrl: "templates/tabs.html"
})

    .state('info.informatie', {
        url: '/informatie',
        views: { 
            'info-informatie': {
                templateUrl: 'templates/info-informatie.html',
                controller: 'InfoCtrl'
            }
        }
    })

现在据我所知这应该可以解决问题，但问题是选项卡没有显示在标题中，而且当我硬链接到路由时，它会停留在同一页面上而没有任何错误......

Now as far as i can tell this should do the trick, but the problems are that the tab doesn't show in the header, and also when i hardlink to the route it's stays on the same page without any kind of error...

我已经制作了模板，并配置了控制器.

i've made the templates, and configured the controllers.

我是 Angular 和 Ionic 的新手，所以它可能很简单，但我无法弄清楚......我已经阅读了手册和文档.

I'm new with Angular as well as Ionic so it might be something quite easy but i can't figure it out.. i've read the manuals and the docs.

！！重要通知当我将视图更改为另一个视图时，例如

!!IMPORTANT NOTICE When i change the view to another one like

.state('info.informatie', {
        url: '/informatie',
        views: { 
            'TAB-OMGEVING': {
                templateUrl: 'templates/info-informatie.html',
                controller: 'InfoCtrl'
            }
        }

它可以工作，但活动状态被放置在另一个选项卡上，历史堆栈可以追溯到那个选项卡，这不是我打算做的，我宁愿从一开始就做，然后用廉价的修复程序构建一个应用程序和代码使用不当.

it works, but the active state is placed on another tab and the history stack traces back to that tab which is not what I intend to do and i would rather do it right from the start then build an app with cheap fixes and wrong use of codes.

有人可以帮我吗?

推荐答案

几点，我也是新手，但希望对我有所帮助.

A few points, Im new to this too but hope Im of some help.

1. 我认为你的代码应该在导航栏部分，导航视图应该留空，因为它是你的 html 填充的地方
2. 使用 ui-sref 而不是 href..like 或者使用按钮来使用 ui-sref 作为好吧.
3. 因为你使用 info.something，所以你的父状态或基本状态自然是信息状态.

1. I think your code should be in the nav-bar segment, nav-view should be left empty as its the place where your html populates
2. use ui-sref instead of href..like <a ui-sref='info.informatie'>something</a>or alternatively use a button to employe ui-sref as well.
3. because u use info.something, naturally your parent or base state is info state.

这篇关于标题中的离子导航选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！