角度 2 下拉引导程序 4 避免单击时关闭答案

【问题标题】：angular 2 dropdown bootstrap 4 avoid close on click角度 2 下拉引导程序 4 避免单击时关闭
【发布时间】：2017-07-30 23:27:54
【问题描述】：

作为标题，我需要避免在下拉菜单中单击时自动关闭，这是代码：

 <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>

有什么想法吗？提前谢谢

【问题讨论】：

标签： angular bootstrap-4 ng-bootstrap

【解决方案1】：

像这样将 autoClose 与您的 ngbDropdown 一起使用：

<div ngbDropdown  autoClose="false"></div>

【讨论】：

【解决方案2】：

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>

【讨论】：