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关于何时显示或隐藏工具提示，如下所示：

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何时手动触发工具提示或不这样：

父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的作用

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

1 个答案: