Angular汉堡菜单问题：routerLink跳转后菜单不关闭且href路由异常

问题1：点击routerLink跳转后汉堡菜单不自动关闭 #

当前菜单依赖checkbox的checked状态控制显示/隐藏，而Angular的routerLink是单页跳转，页面不会刷新，checkbox的状态不会自动重置。可以通过两种方式解决：

方式1：点击路由链接时手动关闭菜单 #

给checkbox添加模板引用变量，在每个routerLink的点击事件中重置checkbox状态：

修改HTML代码：

<div class="">
  <label>
    <!-- 添加模板引用变量 #menuToggle -->
    <input type="checkbox" #menuToggle>
    <span class="menu"> 
      <span class="hamburger"></span> 
    </span>

    <ul>
      <!-- 点击时关闭菜单 -->
      <li> <a class="u-btn u-button-style u-block-control u-block-adf6-34" routerLink="/about" (click)="menuToggle.checked = false">Home</a> </li>
      <!-- 把href改成routerLink，同时添加关闭事件 -->
      <li> <a class="u-btn u-button-style u-block-control u-block-adf6-34" routerLink="/about" (click)="menuToggle.checked = false">About</a> </li>
      <!-- 同样替换为routerLink并添加关闭事件 -->
      <a class="" routerLink="/about" (click)="menuToggle.checked = false">Conta</a>
    </ul>
  </label>
</div>

方式2：监听路由变化自动关闭菜单 #

如果需要支持浏览器前进/后退等场景下自动关闭菜单，在组件中订阅路由事件：

修改组件TS代码：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  // 保留你的组件元数据
})
export class YourComponent implements OnInit {
  menuVisible = false;

  constructor(private router: Router) {}

  ngOnInit() {
    // 监听路由跳转完成事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      const menuToggle = document.querySelector('label input[type="checkbox"]') as HTMLInputElement;
      if (menuToggle && menuToggle.checked) {
        menuToggle.checked = false;
      }
      // 同步更新menuVisible变量
      this.menuVisible = false;
    });
  }

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

如果想用menuVisible变量完全控制菜单状态（更符合Angular风格），可以把checkbox和变量双向绑定：

<input type="checkbox" [(ngModel)]="menuVisible">

CSS的input:checked样式依然生效，因为双向绑定会同步checkbox的checked状态。

问题2：使用href属性跳转路径错误 #

Angular是单页应用，用href会触发页面刷新，且在Hash模式下（你的URL包含/#/），href="/about"会跳转到服务器根路径的/about，而非前端路由的/#/about。

解决方法：统一使用Angular的routerLink替代href
如上面HTML修改所示，把所有href替换为routerLink，既符合单页应用的无刷新跳转，又能正确匹配前端路由。如果特殊场景必须用href，需要写成href="#/about"（对应Hash模式），但不推荐这种方式。

内容的提问来源于stack exchange，提问作者Антон Костомаров