Angular 2+ - 如何在同一元素上组合mouseover，mouseout和click事件？

Question

我正在尝试实现导航链接功能，如果用户鼠标悬停它打开，如果用户mousesout，则关闭。但是如果用户点击链接，那么它也会切换它。我遇到的问题是事件彼此冲突，导致导航下拉列表闪烁。单击切换关闭它，但同时鼠标悬停在它上面，表示打开。

现实生活中的例子 - https://www.td.com/ca/en/personal-banking/ - 导航中“产品”或“解决方案”的工作方式。

Answer 1

1. 您应该使用mouseenter和mouseleave而不是您的事件，因此它们不会在嵌套标签上触发。
2. 我建议使用RxJs的fromEvent制作一个开放性的Observable，并将你所有的事件汇总成一个boolean。

在这里，我为你制作了一个stackblitz来展示我的意思：https://stackblitz.com/edit/angular-4ntjhm?file=src%2Fapp%2Fhello.component.ts

可观察部分：

    const mouseenter$ = fromEvent(nativeElement, 'mouseenter');
    const mouseleave$ = fromEvent(nativeElement, 'mouseleave');
    const click$ = fromEvent(nativeElement, 'click');

    this.open$ = merge(
      mouseenter$.pipe(mapTo(true)),
      mouseleave$.pipe(mapTo(false)),
      click$.pipe(mapTo(null)),
    ).pipe(
      scan((acc, current) => current === null ? !acc : current, false),
      startWith(false),
      distinctUntilChanged(),
    );

基本上，您将enter映射为true并保留为false，并在单击时切换先前的值。