Angular下拉框点击输入框消失 求无jQuery解决方案

I totally get why you don't want to bring jQuery into your Angular project—let's stick with native Angular and ngx-bootstrap tools to solve this dropdown closing issue. Here are a few clean, jQuery-free solutions:

1. Quick Fix: Stop Event Propagation Directly on Inputs #

The simplest approach is to use Angular's native event binding to halt event bubbling right on your input elements. This works exactly like the jQuery stopPropagation() method, but without relying on jQuery.

Modify your input elements like this:

<ul class="nav navbar-right">
  <li class="dropdown" dropdown>
    <a href="#" dropdownToggle class="dropdown-toggle" data-toggle="dropdown">
      <img src="assets/images/login_logo.png" alt="" class="img-responsive">
    </a>
    <!-- Dropdown Form -->
    <ul *dropdownMenu class="dropdown-menu" role="menu">
      <form class="form-group" action="index.html" method="post">
        <input class="form-control form-control-sm" type="text" placeholder="Enter your name" (click)="$event.stopPropagation()">
        <input class="form-control form-control-lg" type="text" placeholder="Enter your name" (click)="$event.stopPropagation()">
      </form>
    </ul>
  </li>
</ul>

The (click)="$event.stopPropagation()" tells Angular to stop the click event from moving up the DOM tree, so Bootstrap/ngx-bootstrap's dropdown close logic never gets triggered when you interact with the inputs.

2. Reusable Solution: Create a Custom Directive #

If you have multiple elements in your dropdown that need this behavior, a reusable directive keeps your code clean and DRY.

First, create a directive:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[stopPropagation]'
})
export class StopPropagationDirective {
  @HostListener('click', ['$event'])
  onClick(event: MouseEvent): void {
    event.stopPropagation();
  }
}

Don't forget to declare this directive in your Angular module. Then use it on any elements where you want to prevent event bubbling:

<input class="form-control form-control-sm" type="text" placeholder="Enter your name" stopPropagation>
<input class="form-control form-control-lg" type="text" placeholder="Enter your name" stopPropagation>

3. Use ngx-bootstrap's Built-in autoClose Option #

ngx-bootstrap's dropdown component has a built-in autoClose property that lets you control when the dropdown closes. Setting it to 'outside' will only close the dropdown when clicking outside of it—interactions inside the dropdown (like typing in inputs) won't trigger a close.

Update your dropdown element like this:

<li class="dropdown" dropdown [autoClose]="'outside'">

This is the most elegant solution since it leverages the component's native configuration instead of adding extra event handlers.

All these methods fit perfectly with Angular's architecture and avoid jQuery entirely. Pick the one that best matches your project's needs!

内容的提问来源于stack exchange，提问作者Aarush Aaditya