Question

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

这是我的代码

<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）的样子。。

Answer 1

检查Persistent Menu section here

您需要设置

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

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

除非您不想为内页设置菜单，否则它应显示所有选项卡。离子here的示例菜单代码整个应用的菜单设置为here

离子2：动态地将抽屉内容放在多个视图中

1 个答案: