Блог

Главная - Вопросы по программированию - routerLink внутри панели навигации в выпадающем меню не работает (Angular и Springboot)

routerLink внутри панели навигации в выпадающем меню не работает (Angular и Springboot)

#java #angular #typescript #spring-boot

#java #angular #typescript #весенняя загрузка

Вопрос:

я должен разработать веб-приложение, используя spring boot и angular. В этом приложении есть вкладка, которая содержит различные данные (подключается к MongoDB). я создал компонент для добавления новых данных на этой вкладке. Проблема в том, что когда я пытаюсь нажать ссылку в выпадающем меню внутри навигационной панели, она перенаправляет меня не на нужную страницу, а показывает страницу с белой меткой

я попытался использовать routerLink и href, удалить выпадающий список и использовать кнопку в панели навигации. я добавил navar первым в моем index.html затем я попробовал внутри app.component.

мой index.html

  /* When the user clicks on the button, 
          toggle between hiding and showing the dropdown content */
          function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
          }
          
          // Close the dropdown if the user clicks outside of it
          window.onclick = function(e) {
            if (!e.target.matches('.dropbtn')) {
            var myDropdown = document.getElementById("myDropdown");
              if (myDropdown.classList.contains('show')) {
                myDropdown.classList.remove('show');
              }
            }
          }  
        <header>
          <div id="riga-top"></div>
          <nav id="navbar">
            <div id="area-logo-universita">
              <img src="assets/img/logo-unicam.jpg">
            </div>
            <div id="area-logo-servizio">
              <img src="">
            </div>
            <ul>
              <li class="active collapse">
                <a href="/contatto">HOME</a>
              </li>
              <li class="dropdown collapse">
                <button class="dropbtn" onclick="myFunction()">Aziende
                  <span class="caret"></span>
                </button>
                <div class="dropdown-menu dropdown-content" id="myDropdown">
                  <a href="/azienda" class="ainside">Aggiungi Azienda</a>
                </div>
              </li>
                      
          </nav>
        </header>
        <!-- Left side column. contains the logo and sidebar -->
        <div class="content-wrapper" style="background-color: rgb(236, 240, 245) !important; background-image: url(amp;quot;/Content/images/bg-home.jpgamp;quot;) !important; background-repeat: no-repeat !important; min-height: 710px;">
          <div class="container">
            <!-- Main content -->
            <section class="content">
              <app-root></app-root>
            </section><!-- /.content -->
          </div>
        </div>
        <footer>
        </footer>

Ответ №1:

Вы должны реализовать Router Link, как показано ниже, и не должны использовать href, вы можете найти полную документацию здесь.

Замените следующее 

 <li class="active collapse">
    <a href="/contatto">HOME</a>
</li>

Этим

 <li class="active collapse">
    <a [routerLink]="['/contatto']">
      HOME
    </a>
 </li>