Угловой выпадающий список исчезает

Question

Я использую Angular 5.1.2 + Bootstrap 3.3.7 + ngx-bootstrap 2.0.0-rc.0. Я пытаюсь создать выпадающую страницу входа.

  <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">
              <input class="form-control form-control-lg" type="text" placeholder="Enter your name">
            </form>
          </ul>

Раскрывающийся список работает нормально, но проблема в том, что когда мы нажимаем на содержимое раскрывающегося списка (то есть поле ввода в этом случае), раскрывающийся список исчезает. Это потому, что когда мы щелкаем по нему, вызов отправляется обратно на загрузчик, чтобы закрыть его, и это ожидаемое поведение. Чтобы предотвратить возврат вызова, мы должны использовать функцию jQuery:

$('.dropdown-menu input').click(function(e) {
        e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
    });

Однако я не хочу использовать jQuery с Angular. Есть ли другое решение?

Answer 1

Попробуй это:

<input ... onclick="(event||window.event).stopPropagation()">

(event||window.event) для совместимости с IE - в IE событие будет неопределенным, поэтому вместо него используется window.event. Если вам нужно, чтобы он работал на IE8 или более ранней версии, вам нужно добавить что-то, чтобы использовать cancelBubble, если stopPropagation недоступен.

См. Как остановить распространение событий с помощью встроенного атрибута onclick? для связанных деталей