嵌套的标签栏

Question

是否有离子框架的方式，以有这样一个嵌套的标签栏：

我试图在Codepen，但它并没有真正的工作：

Example on Codepen

.state('tabs.about', { 
    url: "/about", 
    abstract: true, 
    views: { 
     'about-tab': { 
      templateUrl: "templates/about.html" 
     } 
    } 
}) 

.state('tabs.about.page1', { 
    url: "/page1", 
    views: { 
     'about-page1': { 
      templateUrl: "templates/about-page1.html" 
     } 
    } 
}) 

.state('tabs.about.page2', { 
    url: "/page2", 
    views: { 
     'about-page2': { 
      templateUrl: "templates/about-page2.html" 
     } 
    } 
}); 

有没有人谁知道正确的方式来做到这一点？

感谢

Answer 1

我尝试在例如但codePen如我所料我不起作用。但我在一个本地项目中解决了你的问题。确保你有最新版本的离子或你可以更新它：

npm install -g ionic 

你几乎在那里。你需要一个抽象设置成这样的观点：

angular.module('ionicApp', ['ionic']) 

.config(function($stateProvider, $urlRouterProvider) { 

$stateProvider 

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

.state('tabs.home', { 
    url: "/home", 
    views: { 
     'home-tab': { 
      templateUrl: "templates/home.html", 
     } 
    } 
}) 

.state('tabs.about', { 
    url: "/about",   
    views: { 
     'about-tab': { 
      templateUrl: "templates/about.html", 
      abstract: true 
     } 
    } 
}) 

.state('tabs.about.page1', { 
    url: "/page1", 
    views: { 
     'about-page1': { 
      templateUrl: "templates/about-page1.html" 
     } 
    } 
}) 

.state('tabs.about.page2', { 
    url: "/page2", 
    views: { 
     'about-page2': { 
      templateUrl: "templates/about-page2.html" 
     } 
    } 
}); 

$urlRouterProvider.otherwise("/tab/home"); 

}); 

并使用你曾评论代码：

<ion-tabs class="tabs-striped tabs-top tabs-background-stable"> 

      <ion-tab title="Page 1" ui-sref="tabs.about.page1"> 
       <ion-nav-view name="about-page1"></ion-nav-view> 
      </ion-tab> 

      <ion-tab title="Page 2" ui-sref="tabs.about.page2"> 
       <ion-nav-view name="about-page2"></ion-nav-view> 
      </ion-tab> 

     </ion-tabs> 

我评论前一个标签代码，特别是这样的：

<!--<div class="tabs-striped tabs-top tabs-background-stable"> 
     <div class="tabs"> 
      <a class="tab-item" ui-sref="tabs.about.page1"> 
      Page 1 
      </a> 
      <a class="tab-item" ui-sref="tabs.about.page2"> 
      Page 2 
      </a> 
     </div> 
     </div>--> 

其余的HTML代码是一样的

我的离子版本是：1.3.19

我希望能帮到你