java - 下拉菜单中导航栏内的 RouterLink 不起作用(Angular 和 Springboot)

Question

我必须使用 Spring Boot 和 Angular 开发一个 Web 应用程序。在此应用程序中，有一个选项卡，其中包含各种数据(与 mongoDB 连接)。我创建了一个组件，用于在此选项卡中添加新数据。问题是，当我尝试按导航栏中下拉菜单中的链接时，它不会将我重定向到正确的页面，而是显示白标签页面

我尝试使用 routerLink 和 href，删除下拉列表并使用导航栏中的按钮。我首先在我的index.html中添加了navar，然后我在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(&quot;/Content/images/bg-home.jpg&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>
        
      

Answer 1

您必须像下面这样实现 Router Link 并且不应该使用 href，您可以找到完整的文档 here.

替换以下内容

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

按此

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