html - 如果我单击 Angular 中的类，则隐藏 div

Question

我正在为我的 Angular 练习(第 13 版)制作汉堡包菜单。

当我单击汉堡包图标时，它会隐藏并打开菜单(切换)，但我还想在单击其中一个元素(主页、关于我、我的工作)后隐藏菜单。

我计划的解决方案是在我单击其中一个 nav__item 类时隐藏 nav 类。

我的页眉组件:

HTML:

<header>
  <div class="logo">
      <img src="assets/img/norberticon.png" alt="">
  </div>
  <button class="nav-toggle" aria-label="toggle navigation" (click)="toggleShow()">
      <span class="hamburger"></span>
  </button>

  <nav class="nav" *ngIf="isShown">
      <ul class="nav__list" >
          <li class="nav__item"><a routerLink="/" class="nav__link">Home</a></li>
          <li class="nav__item"><a routerLink="about" class="nav__link">About me</a></li>
          <li class="nav__item"><a routerLink="/mywork" class="nav__link">My Work</a></li>
      </ul>
  </nav>

</header>

.Ts 切换菜单的代码:

  isShown: boolean = false ; // hidden by default


  toggleShow() {
  
  this.isShown = ! this.isShown;
  
  }

菜单:

Answer 1

给每个 li 元素添加 toggleShow() 函数不起作用？

<li class="nav__item"><a routerLink="/" class="nav__link" (click) = "toggleShow()">Home</a></li>
<li class="nav__item"><a routerLink="about" class="nav__link" (click) = "toggleShow()">About me</a></li>
<li class="nav__item"><a routerLink="/mywork" class="nav__link" (click) = "toggleShow()">My Work</a></li>