Ionic 2: Place drawer content in multiple views dy

2019-07-30 02:36发布

问题:

I'm working with ionic tab template to which I added a navigation drawer. I want the navigation drawer to be available to all the tabs, but I don't want to repeat the markup for the content of drawer in all the tab pages. How do I include this content dynamically (something like php include()). Your help will be greatly appreciated.

Here is my code

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>Welcome</ion-title>
        <ion-buttons start left>
            <button menuToggle ion-button small icon-only color="royal">
                <ion-icon name="menu"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<!-- NAVIGATION DRAWER MARKUP THAT I DONT'T WANT TO REPEAT -->
<!-- STARTS HERE -->
<ion-menu [content]="mycontent">
    <ion-content>
        <ion-list>
            <ion-item small>
                <ion-icon ios="ios-contact" md="ios-contact" item-left></ion-icon> Profile
            </ion-item> <!-- more content -->
        </ion-list>
    </ion-content>
</ion-menu>
<!-- ENDS HERE -->
<!-- NAVIGATION DRAWER MARKUP THAT I DONT'T WANT TO REPEAT -->

<ion-nav #mycontent [root]="homePage"></ion-nav>

<ion-content padding>
    <!-- CONTENT OF THE HOME-PAGE -->
</ion-content>

This is what the rootPage (HomePage) looks like . . .

回答1:

Check Persistent Menu section here

You need to set

<ion-menu [content]="mycontent" persistent=true>

Persistent menus display the MenuToggle button in the Navbar on all pages in the navigation stack.

It should display for all your tabs unless you dont want to set menu for inner pages. Sample menu code by ionic here The menu for the entire app is set here