Директива для выдачи кликов за пределы элемента срабатывает при добавлении элемента - PullRequest
Новая
       18

Директива для выдачи кликов за пределы элемента срабатывает при добавлении элемента

0 голосов
/ 23 октября 2019

Я создал небольшую директиву, которая генерирует щелчки за пределами определенного элемента. Цель этого состояла в том, чтобы обработать редактирование таблицы (дважды щелкните, чтобы начать редактирование, и щелкните вне элемента, чтобы остановить его).

Вот упрощенное решение: 

@Directive({
  selector: '[appCloseEdit]'
})
export class CloseEditDirective {

  @Input() public appRowElement: any;

  @Output() public clickOutside = new EventEmitter();
  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement: any) {
    const clickedInside = this.appRowElement === targetElement;
    if (!clickedInside) {
      this.clickOutside.emit('');
    }
  }
}

Директиваиспользуется элементом ввода. 

<input #rowElement
       appCloseEdit
       [appRowElement]="rowElement"
       (clickOutside)="emitClickOutside(item)"
       *ngIf="editable"/>

Чтобы включить редактирование элемента, я нажимаю кнопку. 

<button (click)="addRow();">Add Row</button>

Вот логика компонента 

export class AppComponent  {
  editable = false;

  emitClickOutside(item) {
    console.log('Clicked outside the input');
  }

  addRow() {
    this.editable = true
  }
  addRowWithSubscribe() {
    let delayed = of('dummy').pipe(delay(100));

    delayed.subscribe(() => {
      this.editable = true;
    })

  }
}

Проблема в том, что нажатие addRow() фактически вызывает внешний щелчок, чего не должно быть. Мне удалось найти хакерский способ, используя addRowWithSubscribe(), который в основном добавляет небольшую задержку между щелчком и переключением this.editable.

Stackblitz

...