如何將選項卡設置爲離子2中的側菜單頁面？

app.componnents.ts

@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    rootPage = TabsPage; 

    @ViewChild(Nav) nav: Nav; 
pages: Array<{title: string, component: any}>; 

    constructor(public platform: Platform){ 
    this.initializeApp(); 
    this.pages = [ 
     { title: 'Page One', component: Page1 }, 
     { title: 'Page Two', component: Page2 } 
    ]; 

    } 

    initializeApp() { 
    this.platform.ready().then(() => { 
     StatusBar.styleDefault(); 
     Splashscreen.hide(); 
    }); 
    } 

    openPage(page) { 
    this.nav.setRoot(page.component); 
} 
}

app.html

<ion-menu [content]="content"> 
    <ion-header> 
    <ion-toolbar> 
     <ion-title>Menu</ion-title> 
    </ion-toolbar> 
    </ion-header> 

    <ion-content> 
    <ion-list> 
     <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
     {{p.title}} 
     </button> 
    </ion-list> 
    </ion-content> 

</ion-menu> 
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

tabs.html

<ion-tabs #tabs> 
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab> 
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab> 
</ion-tabs>

個

tabs.ts

@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 

    tab1Root: any = HomePage; 
    tab2Root: any = AboutPage; 
    tab3Root: any = ContactPage; 

    constructor(public navCtrl: NavController) { 
    } 
}

page1.html

<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Page One</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <h3>Ionic Menu Starter</h3> 

    <p> 
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way. 
    </p> 

    <button ion-button secondary menuToggle>Toggle Menu</button> 
    <ion-item> 
    <ion-label color="primary" fixed>Fixed Label</ion-label> 
    <ion-input type="tel" pattern="\d*" maxlength="4" placeholder="Tel Input"></ion-input> 
    </ion-item> 

</ion-content>

我嘗試添加tabs到sidemenu頁，但它幾乎失敗。 sidemenu使用完全不同的路由。任何想法如何將tabs menu添加到side menu頁面？

我用ion-footer標籤在page1.html但它不能正常工作。

<ion-footer> 
    <ion-toolbar> 
<ion-tabs> 
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab> 
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab> 
</ion-tabs> 
    </ion-toolbar> 
</ion-footer>

來源

2017-07-21 RSA

結合你得到這個工作？ –

還沒有。仍然當導航到側面菜單頁面極爲不同的標籤頁標籤欄刪除。 – RSA

您是否檢查過'離子型'會議應用程序？ –

禮，我已經做了側菜單上的一些工作，各地的標籤

https://github.com/jvaranam/Ionic3-Sidemenu-tabs

來源

2017-08-02 10:09:59

親愛的@ jose-g-varanam，您在sidemenu中有選項卡，這意味着這兩個選項卡是sidemenu提及的相同頁面。如果選項卡菜單涉及2個不在sidemenu中的頁面，那麼在選項卡菜單中我們可以有側面菜單，但是在任何側面菜單提到的頁面中，我們都看不到tabsmenu。這是我的問題的主要部分。如何解決這個問題。 – RSA

如何將選項卡設置爲離子2中的側菜單頁面？

回答

相關問題