打字稿，单击按钮时防止引导下拉菜单关闭答案

【问题标题】：Typescript, Prevent Bootstrap Dropdown from closing when button is clicked打字稿，单击按钮时防止引导下拉菜单关闭
【发布时间】：2018-05-10 06:08:48
【问题描述】：

我制作了一个简单的引导下拉菜单来进行注册或登录。在下拉列表中，我们有文本和按钮，例如“没有帐户？register”、“已经有帐户？ login"。register 和 login 是用于更改表单的按钮。但是当单击按钮时，下拉菜单已关闭，我们必须再次单击以打开下拉菜单才能查看/使用其他表单。我想防止当单击其中的这些按钮时，此引导下拉菜单会关闭。下拉菜单在 app.component 内，表单在 app.parent 内。我正在使用角度 cli 打字稿。

//component.ts
changeForm() {
  this.isNewUser = !this.isNewUser
}

<!--app.component.html-->
<div>
  <ul class="nav navbar-nav">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" auto-close="disabled">REGISTER/LOGIN <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <app-parent></app-parent>
      </ul>
    </li>
  </ul>
</div>

<!--parent.component.html-->
<div *ngIf="isNewUser">
  <p *ngIf="errorMessage.length > 0" class="text-danger">{{errorMessage}}</p>
  <p *ngIf="error.message.length > 0" class="text-danger">{{error.message}}</p>
  <form (ngSubmit)="onSignUp()">...</form>
  <h4 class="text-primary">Already have an Account? <button type="submit" href="#" class="btn btn-primary btn-xs" (click)="changeForm()">Log In</button></h4>
</div>

<div *ngIf="!isNewUser">
  <p *ngIf="errorMessage.length > 0" class="text-danger">{{errorMessage}}</p>
  <p *ngIf="error.message.length > 0" class="text-danger">{{error.message}}</p>
  <form (ngSubmit)="onLoginEmail()">...</form>
  <h4 class="text-primary">Not have any Account yet? <button type="submit" href="#" class="btn btn-success btn-xs" (click)="changeForm()">Register</button></h4>
</div>

【问题讨论】：

标签： html css twitter-bootstrap typescript dropdown

【解决方案1】：

刚刚通过使用event.stopPropagation(); 函数找到了答案并将其放入我的changeForm() 函数中。

changeForm() {
  this.isNewUser = !this.isNewUser;
  event.stopPropagation();
}

【讨论】：

【解决方案2】：

如果您在应用项目中包含 jquery，则在组件文件中写入 var $ as any; 然后在 changeForm 函数中您可以写入 $("#dropdown").addClass('open ');您必须在其中为您的 as dropdown 提供 id 属性。

【讨论】：