Angular 响应式导航栏：纯 Angular 实现移动端菜单折叠与展开

本文详解如何在 angular 中不依赖 jquery，通过数据绑定与 css 媒体查询实现可响应的导航栏------点击汉堡图标展开/收起菜单，并确保状态同步、样式平滑、代码可维护。 本文详解如何在 angular 中不依赖 jquery，通过数据绑定与 css 媒体查询实现可响应的导航栏------点击汉堡图标展开/收起菜单，并确保状态同步、样式平滑、代码可维护。在 Angular 应用中构建响应式导航栏时，核心原则是 "用状态驱动视图，而非直接操作 DOM"。您当前代码中尝试模仿 jQuery 的 .toggleClass() 行为，但问题根源在于：Angular 的变更检测机制与手动 DOM 操作（如 jQuery）存在冲突，且 @HostListener 和类绑定逻辑未正确关联到目标元素。下面是一个完整、健壮、符合 Angular 最佳实践的解决方案：? 正确实现步骤1. 组件 TypeScript：管理菜单状态（无需 jQuery）import { Component } from '@angular/core';@Component({ selector: 'app-menu', templateUrl: './menu.component.html', styleUrls: ['./menu.component.scss']})export class MenuComponent { isMenuOpen = false; toggleMenu(): void { this.isMenuOpen = !this.isMenuOpen; } // 可选：点击菜单项后自动关闭（提升移动端体验） closeMenu(): void { this.isMenuOpen = false; }}2. HTML 模板：使用 [ngClass] 精准控制类名<nav class="navbar" [ngClass]="{ 'scrolled': isScrolled }"> <div class="max-width"> <div class="logo"> <a href="#">Nucleo Mobile <span>Varese</span></a> </div> <!-- 响应式菜单容器 --> <ul class="menu" [ngClass]="{ 'active': isMenuOpen }"> <li><a href="#" (click)="closeMenu()">In generale</a></li> <li><a href="#" (click)="closeMenu()">La nostra missione</a></li> <li><a href="#" (click)="closeMenu()">Cosa facciamo</a></li> <li><a href="#" (click)="closeMenu()">Dove siamo</a></li> <li><a href="#" (click)="closeMenu()">Contatti</a></li> <li><a href="#" (click)="closeMenu()">Comunicazioni</a></li> </ul> <!-- 汉堡按钮（仅小屏显示） --> <div class="menu-btn" (click)="toggleMenu()"> <i class="fas fa-bars" [ngClass]="{ 'active': isMenuOpen }"></i> </div> </div></nav>? 关键点： 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。