html - CSS Only sidenav 不会在路由时关闭

Question

通过按下左上角按钮打开的 sidenav 仅在切换按钮或用户单击菜单外的内容时关闭。

我希望当用户按下菜单中的任何链接时关闭菜单。

https://stackblitz.com/edit/angular-ho9bp2

Answer 1

export class AppComponent implements OnInit {

  constructor(private router: Router) { }

  toggleMenu: boolean = true;
  ngOnInit() {
  }
  closeMenu(){
    this.toggleMenu = false;
    console.log('close this menu', this.toggleMenu);
  }
  openMenu(){
    this.toggleMenu = true;
    console.log('open this menu', this.toggleMenu);
  }
}


<div class="page">
  <header tabindex="0">Matchvinder</header>
  <div id="nav-container" (click)="openMenu()" style="z-index: 9999;">
    <div class="bg"></div>
    <div class="button open" (click)="openMenu()" tabindex="0">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div id="nav-content" tabindex="0">
      <ul *ngIf="toggleMenu">
        <li (click)="closeMenu()"><a routerLink="/waiting">Waiting</a></li>
        <li (click)="closeMenu()"><a routerLink="/roster">Roster</a></li>
        <li (click)="closeMenu()"><a routerLink="/progress">Progress</a></li>
        <li (click)="closeMenu()" class="small"><a href="">Holdkode: 5274</a></li>
      </ul>

    </div>
  </div>

  <main>
    <div #content>
      <router-outlet #outlet="outlet"></router-outlet>
    </div>
  </main>
</div>

请查看工作代码here在 stackblitz 上。