Angular项目中Materialize-CSS汉堡菜单无法触发侧边栏

我在Angular项目里用Materialize-CSS实现移动端汉堡菜单触发侧边栏功能，菜单图标显示正常，但点击后侧边栏毫无反应。确认侧边栏已经完成实例化，也按官网步骤操作了，Materialize安装没问题，控制台没有JavaScript错误，只是代码里var instances = M.Sidenav.init(elems, {});提示“instances已声明但未使用”。

代码片段 #

HTML #

<nav>
  <div class="nav-wrapper">
    <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <ul id="nav-mobile" class="hide-on-med-and-down">
      <li class="center-align social"><a href="https://www.instagram.com/prunieres_hotel_restaurant/"><i class="fa-brands fa-instagram fa-xl"></i></a></li>
      <li class="center-align"><a routerLink="">Accueil</a></li>
      <li class="center-align"><a routerLink="/hotel">Hôtel</a></li>
      <li class="center-align"><a routerLink="/restaurant">Restaurant</a></li>
      <li class="center-align"><a routerLink="/histoire"> Histoire</a></li>
      <li class="center-align"><a routerLink="/region">La Région</a></li>
      <li class="center-align"><a routerLink="/contact">Contact</a></li>
      <li class="center-align social"><a><i class="fa-brands fa-instagram invisible fa-xl"></i></a></li>
    </ul>
  </div>
</nav>

<ul class="sidenav" id="mobile-demo">
  <li class="social"><a href="https://www.instagram.com/prunieres_hotel_restaurant/"><i class="fa-brands fa-instagram fa-xl"></i></a></li>
  <li><a routerLink="">Accueil</a></li>
  <li><a routerLink="/hotel">Hôtel</a></li>
  <li><a routerLink="/restaurant">Restaurant</a></li>
  <li><a routerLink="/histoire"> Histoire</a></li>
  <li><a routerLink="/region">La Région</a></li>
  <li><a routerLink="/contact">Contact</a></li>
</ul>

TypeScript #

import { Component, OnInit } from '@angular/core';

declare const M: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})

export class AppComponent implements OnInit{

  ngOnInit() {
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems, {});
    });
  }
}

问题原因及解决办法 #

核心问题：DOM加载时机冲突 #

Angular的ngOnInit钩子执行时，组件对应的DOM已经渲染完成，此时再监听DOMContentLoaded事件，该事件早已触发，导致初始化代码根本没执行——这就是侧边栏点击无响应的关键原因。

修正后的代码 #

直接在ngOnInit里执行Materialize的初始化逻辑，无需额外监听DOMContentLoaded：

import { Component, OnInit } from '@angular/core';

declare const M: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})

export class AppComponent implements OnInit{

  ngOnInit() {
    // 初始化侧边栏
    const sidenavElems = document.querySelectorAll('.sidenav');
    M.Sidenav.init(sidenavElems, {});
    
    // 可选：如果触发按钮仍无响应，手动初始化触发器
    const triggerElems = document.querySelectorAll('.sidenav-trigger');
    M.Sidenav.init(triggerElems, {
      edge: 'left',
      inDuration: 300
    });
  }
}

额外优化 #

• 消除“instances未使用”警告：直接执行初始化，不声明无用变量：

  M.Sidenav.init(sidenavElems, {});
  

• 确认Materialize的JS文件已正确引入到Angular项目（比如在angular.json的scripts数组中添加对应路径）。

内容的提问来源于stack exchange，提问作者Tristan Lacombe