Только CSS 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>

Пожалуйста, просмотрите рабочий код здесь на стеке.

Answer 2

Я не уверен, как вы включаете и отключаете меню, но я думаю, что добавление EventListener к этим ссылкам, как:

<li (click)="toggleMenu()"><a routerLink="/waiting">Waiting</a></li>