离子2：动态地将抽屉内容放在多个视图中 [英] Ionic 2: Place drawer content in multiple views dynamically

问题描述

我正在使用离子选项卡模板，我添加了一个导航抽屉。我希望导航抽屉可用于所有选项卡，但我不想在所有选项卡页面中重复抽屉内容的标记。如何动态包含此内容（例如php include（））。我们非常感谢您的帮助。

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.

这是我的代码

<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>

这就是rootPage（HomePage）的样子。 。 。

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

推荐答案

检查此处的持久菜单部分

您需要设置

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

持久菜单在导航栏中的所有页面上显示MenuToggle按钮导航堆栈。

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

这篇关于离子2：动态地将抽屉内容放在多个视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！