角2下拉引导上点击

Question

四忌接近一个头衔，我需要避免在下拉自动关闭时，点击里面， 这是代码：

<li class="nav-item dropdown"> 
       <div ngbDropdown class="d-inline-block"> 
        <a class="nav-link dropdown-toggle" href="#" id="dropdownBasic1" autoClose="nonInput" ngbDropdownToggle ng-click="$event.preventDefault();$event.stopPropagation();return false;"> Signin</a> 
        <div class="dropdown-menu" aria-labelledby="dropdownBasic1"> 
         <form> 
          <div class="form-group"> 
           <label for="exampleInputEmail1">Email address</label> 
           <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
          </div> 
          <div class="form-group"> 
           <label for="exampleInputPassword1">Password</label> 
           <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
          </div> 
          <div class="form-group"> 
           <label for="exampleInputFile">File input</label> 
           <input type="file" id="exampleInputFile"> 
           <p class="help-block">Example block-level help text here.</p> 
          </div> 
          <div class="checkbox"> 
           <label> 
           <input type="checkbox"> Check me out 
           </label> 
          </div> 
          <button type="submit" class="btn btn-default">Submit</button> 
         </form> 
        </div> 
       </div> 
      </li> 

什么想法？在此先感谢

Answer 1

NgbCollapse是这种情况下的最佳选择，工作plunker

<ul class="nav nav-pills"> 
    <li class="nav-item"> 
    <a class="nav-link active" href="#">Active</a> 
    </li> 

    <li class="nav-item dropdown"> 
    <a class="nav-link dropdown-toggle" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"> 
    Toggle 
    </a> 
    <div class="dropdown-menu p-3" id="collapseExample" [ngbCollapse]="isCollapsed"> 
     <form> 
     <div class="form-group"> 
      <label for="exampleInputEmail1">Email address</label> 
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
     </div> 
     <div class="form-group"> 
      <label for="exampleInputPassword1">Password</label> 
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
     </div> 
     <div class="form-group"> 
      <label for="exampleInputFile">File input</label> 
      <input type="file" id="exampleInputFile"> 
      <p class="help-block">Example block-level help text here.</p> 
     </div> 
     <div class="checkbox"> 
      <label> 
      <input type="checkbox"> Check me out 
      </label> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
    </div> 
    </li> 
</ul>