Angular 7项目集成Mmenu.js报错：Cannot read property 'classList' of undefined

我之前也踩过这个坑——在纯HTML/JS项目里运行顺畅的Mmenu，放到Angular里就突然报这个错，核心问题其实是Angular的DOM渲染逻辑和静态页面不一样：当你直接在ngOnInit或者组件构造函数里初始化Mmenu时，目标nav元素还没被Angular渲染到DOM树里，Mmenu找不到操作对象，自然就抛出了classList未定义的错误。

下面是我验证过的可行解决方案，一步步来：

1. 先确保依赖安装和样式导入正确 #

首先通过npm安装Mmenu.js：

npm install mmenu-js --save

然后把Mmenu的样式文件导入到项目中，最简单的方式是修改angular.json的styles数组：

"styles": [
  "src/styles.css",
  "node_modules/mmenu-js/dist/mmenu.css"
]

或者也可以在组件的CSS文件里通过@import导入：

@import '~mmenu-js/dist/mmenu.css';

2. 用Angular生命周期钩子+ViewChild安全获取DOM元素 #

别再用document.getElementById硬找元素了，Angular推荐用ViewChild访问组件内的DOM元素，并且要等到视图完全初始化后再初始化Mmenu——也就是在ngAfterViewInit钩子函数里执行操作。

模板部分 #

给你的nav元素加一个模板引用变量（比如#mobileMenu）：

<nav #mobileMenu id="my-menu">
  <ul>
    <li><a href="/home">首页</a></li>
    <li><a href="/about">关于我们</a></li>
    <!-- 更多菜单项 -->
  </ul>
</nav>

组件类部分 #

导入必要的依赖，实现AfterViewInit接口，拿到DOM元素后再初始化Mmenu：

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import Mmenu from 'mmenu-js';

@Component({
  selector: 'app-your-menu-component',
  templateUrl: './your-menu-component.component.html',
  styleUrls: ['./your-menu-component.component.css']
})
export class YourMenuComponent implements AfterViewInit {
  // 通过模板引用变量获取nav元素
  @ViewChild('mobileMenu') mobileMenu!: ElementRef;
  // 保存Mmenu实例，方便后续销毁或操作
  private menuInstance: any;

  ngAfterViewInit(): void {
    // 先确认DOM元素存在，再初始化Mmenu
    if (this.mobileMenu.nativeElement) {
      this.menuInstance = new Mmenu(this.mobileMenu.nativeElement, {
        // 这里配置你的Mmenu选项，比如导航栏标题、主题等
        navbar: {
          title: '导航菜单'
        },
        theme: 'light'
      });
    }
  }

  // 可选：组件销毁时销毁Mmenu实例，避免内存泄漏
  ngOnDestroy(): void {
    if (this.menuInstance) {
      this.menuInstance.destroy();
    }
  }
}

3. 额外注意事项 #

• 如果菜单是在路由组件里，一定要在组件销毁时调用destroy()方法，避免路由切换后残留旧的Mmenu实例。
• 绝对不要在ngOnInit里初始化Mmenu，这时候组件视图还没渲染完成，DOM元素根本不存在。
• 如果开启了Angular的ViewEncapsulation（默认是Emulated），发现Mmenu样式不生效的话，可以把样式放到全局样式文件里。

按这个流程操作后，Mmenu应该就能正常初始化并显示，不会再出现classList未定义的错误了。

内容的提问来源于stack exchange，提问作者Chandrika Sharma