在延迟打开后单击外部时隐藏 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) 的范围。所以两件事：

• “长按”您可以通过多种方式进行，一种方式（不导入库）是使用 @Hostlistener 和 @ViewChild API 并监听事件并使用 ngx-bootstrap manual triggering on何时显示或隐藏工具提示，如下所示：

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 布尔值以在工具提示时读取是否手动触发：

父组件.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 的实际应用