Question

我做了一个简单的bootstrap下拉列表来进行注册或登录。在下拉列表中，我们有文字和按钮，例如“没有帐户？register”，“已经拥有帐户？ login“。register和login是用于更改表单的按钮。但是当按下该按钮时，该下拉列表已关闭，我们必须再次单击以打开下拉列表以查看/使用其他当我点击其中的这些按钮时，我想阻止此引导下拉关闭。下拉列表在app.component内，表单在app.parent内。我正在使用angular 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>

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

如果你在你的app项目中包含了jquery，那么在你的组件文件中写入 var $ as; 然后在你的changeForm函数中你可以写$（“＃dropdown”）。addClass（'open “）;您需要将id属性作为下拉列表。

打字稿，防止Bootstrap Dropdown在关闭按钮时关闭

2 个答案: