Блог

я использую meanmenu в своем приложении angular, и оно работает нормально, но проблема в том, что когда я пытаюсь перенаправить страницу со страницы на другую, происходит то, что я использую href="path" вместо routerlink , поэтому страница обновляется

вот как я использую это в HTML

                    <!-- Main Menu Start -->
                   <div class="main-menu">
                       <nav>
                           <ul>
                               <li routerLinkActive="active"><a routerLink="/home">HOME</a></li>
                               <li class="menu-item-has-children"><a>Shop</a>
                                   <ul class="sub-menu">
                                       <li class="menu-item-has-children" routerLinkActive="active"><a
                                               routerLink="/product">Categories</a>
                                           <ul class="sub-menu">
                                               <li routerLinkActive="active" *ngFor="let category of categories">
                                                   <a [routerLink]="['/product/' [category.name]]">{{category.name}}</a>
                                               </li>
                                           </ul>
                                       </li>
                                   </ul>
                               </li>

                               <li><a href="#">CONTACT</a></li>
                           </ul>
                       </nav>
                   </div><!-- Main Menu End -->
               </div>
               <div class="mobile-menu order-12 d-block d-lg-none col"></div>
  

и это мой Jquery

 $(document).ready(() => {
            $('.main-menu nav').meanmenu({
                meanScreenWidth: '991',
                meanMenuContainer: '.mobile-menu',
                meanMenuClose: '<span class="menu-close"></span>',
                meanMenuOpen: '<span class="menu-bar"></span>',
                meanRevealPosition: 'right',
                meanMenuCloseSize: '0',
            });
        });
  

Причина, по которой это происходит, заключается в том, что MeanMenu копирует HTML-содержимое целевого объекта и вставляет в их элемент nav.mean-nav. Проверьте функцию showMeanMenu в не уменьшенной версии.

Вместо

 var meanMenuContents = jQuery(meanMenu).html();
jQuery('.mean-nav').html(meanMenuContents);
  

Используйте

 jQuery(meanMenu).detach().appendTo('.mean-nav');
  

Примечание:

• Вам также необходимо установить для свойства OnePage значение true в options, чтобы меню автоматически сворачивалось при переходе к новому компоненту.
• Вам также нужно будет изменить функцию meanOriginal на случай, если вы ожидаете изменения макета после загрузки страницы.

В моем случае мне пришлось добавить приведенные ниже строки в исходную функцию Mean

 jQuery(meanMenu).detach().appendTo('#original-nav');
jQuery('.sub-menu').css('display', 'block');
jQuery('.mean-expand').remove();