嵌套的標籤欄

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

我希望能幫到你