Question

我必须使用Spring Boot和Angle开发一个Web App。在此应用程序中，有一个包含各种数据的标签（与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>

下拉菜单中导航栏中的RouterLink不起作用（Angular和Springboot）

1 个答案: