[在angular2中使用模态创建表单

Question

我正在尝试使用一种形式的模态，以从用户那里获取某些输入。我有一个打开模式的按钮，但是单击按钮后，项目直接路由到主页，而无需打开模式（重新启动项目）。这是模态HTML代码：

<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <i class="fas fa-envelope prefix grey-text"></i>
          <input type="email" id="defaultForm-email" class="form-control validate">
          <label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
        </div>

        <div class="md-form mb-4">
          <i class="fas fa-lock prefix grey-text"></i>
          <input type="password" id="defaultForm-pass" class="form-control validate">
          <label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
        </div>

      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button class="btn btn-default">Login</button>
      </div>
    </div>
  </div>
</div>

<div class="text-center">
  <a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalLoginForm">Launch
    Modal Login Form</a>
</div>

这里是完整的HTML代码：

<header>

    <div class="sidebar-fixed position-fixed">

        <a class="logo-wrapper waves-effect">
            <img src="../../../../assets/img/logo.jpeg" class="img-fluid" alt="">  
        </a>

        <div class="list-group list-group-flush">

            <a routerLink="dashboard" routerLinkActive="active" class="list-group-item list-group-item-action waves-effect">
                <mdb-icon fas icon="chart-pie" class="mr-3"></mdb-icon>Dashboard</a>
            <a routerLink="profile" routerLinkActive="active" class="list-group-item list-group-item-action waves-effect">
                <mdb-icon fas icon="user" class="mr-3"></mdb-icon>Profile</a>
        </div>

        <br><br><br>
        <!-- Button trigger modal -->
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header text-center">
      <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        
      </button>
    </div>
    <div class="modal-body mx-3">
      <div class="md-form mb-5">
        <i class="fas fa-envelope prefix grey-text"></i>
        <input type="email" id="defaultForm-email" class="form-control validate">
        <label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
      </div>

      <div class="md-form mb-4">
        <i class="fas fa-lock prefix grey-text"></i>
        <input type="password" id="defaultForm-pass" class="form-control validate">
        <label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
      </div>

    </div>
    <div class="modal-footer d-flex justify-content-center">
      <button class="btn btn-default">Login</button>
    </div>
  </div>
</div>
</div>

<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalLoginForm">Launch
  Modal Login Form</a>
</div>
        <br><br>
        <p>Year Wise Medical Records</p>

        <div class="list-group "  *ngFor="let year of years | async">
              
            <a routerLink="records"  routerLinkActive="active" >
                <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year.key}}</a>
                
        </div>

    </div>
    <!-- Sidebar -->

    <!--Navbar-->
    <mdb-navbar [containerInside]="false" SideClass="navbar navbar-expand-lg navbar-light white">

        <!-- Navbar brand -->
        <logo class="ml-3">
            <a class="logo-wrapper waves-effect">
                    <img src="../../../../assets/img/male_avatar.png" class="img-fluid" alt="" style="border-radius: 50%"> 
            </a>
        </logo>

        <!-- Collapsible content -->
        <links style="padding-left: 5%">

            <!-- Links -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <h5> Akhilesh </h5>
                    <h5> Male </h5>
                    <h5> 21 years </h5>
                </li>
            </ul>
            <!-- Links -->

            <!-- Search form -->
            <ul class="navbar-nav nav-flex-icons">

                    <li class="nav-item">
                        <button (click) = "pdfGen()"> Download PDF </button>
                    </li>
                </ul>
        </links>
        <!-- Collapsible content -->
        
    </mdb-navbar>
    <!--/.Navbar-->

</header>
<!--Main Navigation-->

请让我知道我出了什么问题。

Answer 1

您正在添加一个标记，该标记带有指向您的应用起点的空的Herf wich引用，您必须删除href artt