событие размытия, не стреляющее в угловой компонент - PullRequest
Новая
       26

событие размытия, не стреляющее в угловой компонент

0 голосов
/ 05 сентября 2018

Я пытаюсь получить реактивную форму для правильной обработки событий размытия, и кажется, что она не реагирует должным образом на размытие. 

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

@Component({
  selector: 'app-combo-box-basic',
  templateUrl: './combo-box-basic.html'
})
export class ComboBoxBasic {

  @HostListener('blur', ['$event.target']) onBlur(target) {
    console.log(`onBlur(): ${new Date()} - ${JSON.stringify(target)}`);
  }
}
<div class="btn-group mr-3">
  <input (blur)="onBlur($event.target)" type="text" class="btn btn-outline-success">
  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
    <button (blur)="onBlur($event.target)" class="btn btn-outline-primary" ngbDropdownToggle></button>
    <div class="dropdown-menu" ngbDropdownMenu>
      <button class="dropdown-item">One</button>
      <button class="dropdown-item">Two</button>
      <button class="dropdown-item">Four!</button>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 05 сентября 2018

После долгих поисков и экспериментов я нашел несколько предметов, которые были необходимы для правильной работы. Полнофункциональную демоверсию можно найти здесь

  1. Внешний элемент должен иметь: tabindex="0", чтобы его можно было сфокусировать. Это достигается с помощью: @HostBinding('attr.tabindex') tabindex = '0';

  2. Добавление HostListener для событий размытия перехватит внешний компонент: @HostListener('blur', ['$event.target']) onBlur(target) { ... }

  3. Вам все еще нужно отлавливать события размытия для внутренних компонентов, так что щелчок по входу и выходу будет по-прежнему срабатывать. (blur)="onBlur($event.target)"

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

@Component({
  selector: 'app-combo-box-basic',
  templateUrl: './combo-box-basic.html'
})
export class ComboBoxBasic {

  // Make sure container can receive focus or else blur events won't be seen.
  @HostBinding('attr.tabindex') tabindex = '0';
  @HostListener('blur', ['$event.target']) onBlur(target) {
    console.log(`onBlur(): ${new Date()} - ${JSON.stringify(target)}`);
  }
}
<div class="btn-group mr-3">
  <input (blur)="onBlur($event.target)" type="text" class="btn btn-outline-success">
  <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
    <button (blur)="onBlur($event.target)" class="btn btn-outline-primary" ngbDropdownToggle></button>
    <div class="dropdown-menu" ngbDropdownMenu>
      <button class="dropdown-item">One</button>
      <button class="dropdown-item">Two</button>
      <button class="dropdown-item">Four!</button>
    </div>
  </div>
</div>
...