如何在 Ons-sliding-menu 中为不同页面调用不同的菜单？

Question

我刚刚检查了这个问题implement differens sliding menu on different pages onsen-ui

但存在新菜单“覆盖”旧菜单的问题。如下图所示。

我已经为不同的页面实现了不同的菜单，为每个页面赋予了不同的名称，但我无法删除旧的。 我应该使用什么功能来清除和重新初始化同一个菜单？ 例如如何使用 ons-destroy 解决这个问题或 还有其他解决方案吗？

初始化特定菜单的代码，在本例中为“index_menu.html”：

<ons-sliding-menu menu-page="menu_usato.html" main-page="home_usato.html" side="left"
    var="menu_usato" type="reveal" max-slide-distance="260px" swipable="true" swipe-target-width="50">
</ons-sliding-menu>

调用主页的特定菜单的代码，在这种情况下我可以选择不同的菜单“menu_usato.html”：

<ons-list-item class="menu-item" modifier="chevron" ng-click="menu_usato.setMainPage('home.html', {closeMenu: true})">
    <ons-icon icon="fa-home" fixed-width="true"></ons-icon>
    Home
</ons-list-item>

所有页面都调用不同菜单的代码。

<ons-navigator animation="slide" var="gallery">
    <ons-page>
        <div class="app-page">
            <div class="app-page-menu">
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_land.html');">
                            <img src="images/menu/antipasti.jpg">
                            <p>Land Rover</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_hyundai.html');">
                            <img src="images/menu/primi.jpg">
                            <p>Hyundai</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_mitsubishi.html');">
                            <img src="images/menu/pastefresche.jpg">
                            <p>Mitsubishi</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_ssangyong.html');">
                            <img src="images/menu/secondi.jpg">
                            <p>SsangYong</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_isutzu.html');">
                            <img src="images/menu/insalatamista.jpg">
                            <p>Isutzu</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_greatwall.html');">
                            <img src="images/menu/dolci.jpg">
                            <p>GreatWall</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
                <ons-row>
                    <ons-col>
                        <ons-button modifier="clean" ng-click="gallery.pushPage('index_usato.html');">
                            <img src="images/menu/dolci.jpg">
                            <p>Usato</p>
                        </ons-button>
                    </ons-col>
                </ons-row>
            </div>

        </div>

    </ons-page>
</ons-navigator>   

Answer 1

如果您只想更改菜单，那么setMenuPage 应该足够了。在您的情况下，我们可以看到 2 个菜单，那么我猜您不是替换菜单，而是嵌套它们。为了确保您没有嵌套它们，您需要小心不要做类似menu.setMainPage(pageX) 之类的事情，其中​​pageX 有自己的菜单。

目前似乎是这样——你正在做menu_usato.setMainPage('home.html')，因为它有一个导航器，所以稍后会在里面放更多的页面——我猜他们中的大多数都有自己的菜单。但是，与其嵌套菜单然后尝试删除外部菜单，不如尝试寻找更简单的解决方案。

您可以采取的三种方法是：

1. 仅使用导航器进行导航 - 基本上，如果您的所有页面都有菜单并且您使用导航器是安全的。在我看来，在所有情况下，您都希望拥有menu_something 和home_something。因此，只需使用 index_something 页面仅通过 gallery 进行所有导航。

2. 不要使用导航器 - 只能使用 setMainPage 和 setMenuPage。与前一个完全相反。您可以在index.html 中拥有一个滑动菜单，而不是导航器（假设它再次称为gallery） - 内容最初可以是列表，当您单击时，您可以执行类似的操作 ng-click="setPage('something')"，并定义

   $scope.setPage = function (category) {
     gallery.setMenuPage('menu_' + category + '.html');
     gallery.setMainPage('home_' + category + '.html');
   };
   

3. 如果您不喜欢任何一个选项，那么您应该尽量限制自己不要将带有菜单的页面相互嵌套。

   一个简单的方法就是让你的导航器在外面，里面有滑动菜单的页面。基本上一切都可以保持与当前相同，唯一的区别是menu_something 中菜单项的ng-click。

   只需将其更改为以下任何一种

   • gallery.pushPage('home.html')
   • gallery.replacePage('home.html')
   • gallery.resetToPage('home.html')

   取决于你想要达到的效果。