延迟打开后在外部单击时隐藏ngx-bootstrap工具提示

Question

我需要在按住div的同时单击一会儿（假设是半秒钟）后显示tooltip from ngx-bootstrap。之后，在工具提示外部单击时应将其关闭。我一直在尝试：

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

但是它们似乎都不起作用。 “ focusout”和“ blur”似乎根本不起作用，“ click”的问题是在“ mousedown”后释放鼠标按钮时隐藏了工具提示，从而引发了该问题。

Answer 1

首先，API不支持“ longpress”，因为这超出了框架（IMO）的范围。所以两件事：

• “ Long-press”，您可以通过几种方式来完成，一种方式（不导入lib）是通过使用@Hostlistener和@ViewChild API并监听事件，并在何时使用ngx-bootstrap manual triggering像这样显示或隐藏工具提示：

component.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);
}

component.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"工具提示配置，但是它似乎不适用于手动触发，因此您可以使用@Hostlistener并通过添加isLongPressed布尔值来简单地使用Angular API，当工具提示为手动触发还是不这样：

Parent component.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();
  }
}

这里是code正在起作用