Скрыть подсказку ngx- bootstrap при щелчке снаружи после открытия с задержкой

Question

Мне нужно отобразить всплывающую подсказку из ngx- bootstrap после кратковременного удержания нажатой кнопки div (скажем, полсекунды). После этого подсказка должна закрываться при нажатии за ее пределами. Я пытался с:

triggers="mousedown:click" [delay]="500"
triggers="mousedown:focusout" [delay]="500"
triggers="mousedown:blur" [delay]="500"

Но ни один из них, кажется, не работает. «focusout» и «blur», кажется, не работают вообще, и проблема с «click» заключается в том, что кнопка запускается, когда кнопка мыши отпускается после «mousedown», скрывая всплывающую подсказку.

Answer 1

Во-первых, API не поддерживает "longpress", поскольку это выходит за рамки инфраструктуры (IMO). Итак, две вещи:

• «Длинное нажатие» вы можете сделать несколькими способами, одним способом (без импорта библиотек) является использование @ Hostlistener и @ ViewChild API и прослушивание событий и использование ngx- bootstrap ручного запуска при отображении или скрытии всплывающей подсказки, например:

компонент .ts

public progress: boolean = false;
protected interval: any;

@ViewChild('pop', { static: false }) public tooltip: TooltipDirective ;

@HostListener('mousedown', ['$event']) onMouseDown(event: MouseEvent) {
  this.startInterval()
}

@HostListener('mouseup', ['$event']) onMouseUp(event: MouseEvent) {
  this.stopInterval();
}

private startInterval() {
  this.interval = setInterval(()=> {
    this.tooltip.show()
  }, 1500);
}

private stopInterval(): void {
  clearInterval(this.interval);
}

компонент. html

<p>
  <span tooltip="Hello there! I was triggered manually"
    triggers="focus" #pop="bs-tooltip">
  </span>
</p>
<button type="button" class="btn btn-primary">
  Tooltip with 1.5sec delay
</button>

• «Внешний щелчок» работает с обычными атрибутами всплывающей подсказки trigger="focus" подсказка Конфигурация, однако она не работает с ручным триггером. Похоже, вы можете просто воспользоваться API Angular с @Hostlistener и добавить логическое значение isLongPressed для чтения, когда всплывающая подсказка запускается вручную или не так:

Родительский компонент.ts:

@ViewChild('button', { static: false}) private button: DelayButtonComponent;

@HostListener ('mouseup',['$event']) onPressUp(event: MouseEvent) {
  if(this.button.isLongPress) {
    this.button.isLongPress = !this.button.isLongPress;
  } else {
    this.button.isLongPress = !this.button.isLongPress;
    this.button.tooltip.hide();
  }
}

Вот код в действии