Question

在我的Angular 8应用程序中，屏幕顶部存在一个固定的导航栏。当用户将鼠标悬停在下拉导航链接上时，将显示一个菜单。

现在，如果用户单击菜单链接之一，则将使用“角度路由”打开相应的页面：

<div class="nav-left">
  <div class="dropdown">
    <a class="menu" routerLink="/home">
      {{'HOME.TITLE' | translate}}
      <span class="icon"><i class="fa fa-fw fa-angle-down"></i></span>
    </a>
    <div class="dropdown-content">
      <a routerLink="/home/welcome">
        <span class="icon"><i class="fa fa-fw fa-home"></i></span>
        {{'HOME.TITLE' | translate}}
      </a>
      <a routerLink="/home/news-blog">
        <span class="icon"><i class="fa fa-fw fa-newspaper-o"></i></span>
        {{'HOME.NEWS_BLOG' | translate}}
      </a>
      <a routerLink="/home/features">
        <span class="icon"><i class="fa fa-fw fa-cubes"></i></span>
        {{'HOME.FEATURES' | translate}}
      </a>
    </div>
  </div>
</div>

我的SCSS定义有一个.dropdown:hover选择器，该选择器仅在悬停菜单时显示菜单：

.dropdown {
  .dropdown-content {
    display: none;
  }

  &:hover {
    .dropdown-content {
      display: block;
    }
  }
}

我要实现的目标是，当用户单击菜单链接时，导航菜单会自动关闭。现在，菜单仍处于打开状态，因为Angular Router不会重新加载页面，而只会将页面内容替换为选定的子页面。

在我看来，应该有一个纯CSS / SCSS解决方案来解决此问题，尽管如果它仅适用于某些TypeScript代码，对我来说也可以。到目前为止，我的想法是：

使用特殊的“点击”或“选定” CSS选择器来定义display: none（如果已单击链接）
激活一些Angular函数（如果存在吗？），以重置“ CSS状态”（好像页面将被重新加载一样）
编写一种方法，当单击routerLink时关闭所有导航菜单（似乎太复杂了）

您对上述方法中哪种最合适以及如何实现有什么建议？

Answer 1

您可以在模板中包含以下内容的监听器：

<div class="dropdown" [ngClass]="{'visible': menuVisible}" (mouseover)="toggleMenu()" (mouseout)="toggleMenu()">

在您的TS中：

menuVisible = false;
toggleMenu() {
  this.menuVisible = !this.menuVisible;
}

这将是一个非常简单的实现。例如，您也可以使用Observables进行此操作（每个鼠标事件都有一个Subject发出）。

编辑：我完全忘了添加点击侦听器部分哈哈！我想你虽然有主意！

如果单击页面链接，则关闭导航菜单

1 个答案: