Angular中Materialize CSS下拉菜单与侧边导航无响应的解决求助

AI 小北

2026-8-25

问题：Angular集成Materialize CSS后Dropdown和SideNav无响应

我和朋友都是Angular新手，在为大学项目制作奖学金门户网站复现版时，用Materialize CSS完成了导航栏，但集成到Angular后，Dropdown和SideNav点击完全没反应，查了很多方案都没解决。下面是原HTML和CSS代码：

原CSS代码

body{
    font-family: 'Noto Sans JP', sans-serif;
}

*{
   margin: 0;
   padding: 0;
   
}

.dropdown-content{
    width: max-content !important;
    height:auto !important;
 }

 .nav-wrapper{
    background-color:white;
 }

 .material-icons{
    color: #EBA63F;
 }

 #logo-nav{
    color: #E40C2B;
    width: 100%;
 }

 .li-nav{
    color: #3CBCC3;
 }

 .li-nav:hover{
    color:#1D1D2C;
 }

 #sidenav1{
    color: #1D1D2C;
    background-color: #F7F4E9;
 }

 #sidenav1:hover{
    background-color:#EBA63F;
    color: #1D1D2C;
 }

 #dropdown-css{
    color: #1D1D2C;
 }

 #dropdown-css:hover{
    background-color: #EBA63F;
 }

 #sidenav1>.material-icons{
    color: #1D1D2C;
 }

 .sidenav{
    background-color: #F7F4E9;
 }

 .logos{
   margin-top: 20px;
   background-color: #3CBCC3;
 }

 
 @media only screen and (max-width: 810px) {
    div.nav-wrapper {
        -webkit-box-shadow: 0 3px 5px -3px #000;
        -moz-box-shadow: 0 3px 5px -3px #000;
        box-shadow: 0 3px 5px -3px #000;
    }
  }

  @media only screen and (max-width: 560px) {
    #logo-nav{
      font-size: medium;
    }
}

  .logo,.logo1{
    height: 40px
  }

原HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&amp;family=Noto+Sans&amp;family=Noto+Sans+JP:wght@500&amp;display=swap" rel="stylesheet">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="navbar2.css"/>
    <link rel="stylesheet" href="homepage.css"/>
    
    <title>Navbar Page</title>
</head>
<body>
<header>
  <ul id="dropdown1" class="dropdown-content">
    <li><a id="dropdown-css" href="#!">Student Login</a></li>
    <li class="divider"></li>
    <li><a id="dropdown-css" href="#!">Institute Login</a></li>
    <li class="divider"></li>
    <li><a id="dropdown-css" href="#!">Ministry Login</a></li>
    <li class="divider"></li>
    <li><a id="dropdown-css" href="#!">Nodal Officer Login</a></li>
  </ul>
  <ul id="dropdown2" class="dropdown-content">
    <li><a id="dropdown-css" href="#!">Student Register</a></li>
    <li class="divider"></li>
    <li><a id="dropdown-css" href="#!">Institute Register</a></li>
    <li class="divider"></li>
    <li><a id="dropdown-css" href="#!">Ministry Register</a></li>
    <li class="divider"></li>
    <li><a id="dropdown-css" href="#!">Nodal Officer Register</a></li>
  </ul>
  <ul id="dropdown3" class="dropdown-content">
        <li><a id="sidenav1" href="#!">Student Login</a></li>
        <li><a id="sidenav1" href="#!">Institute Login</a></li>
        <li><a id="sidenav1" href="#!">Ministry Login</a></li>
        <li><a id="sidenav1" href="#!">Nodal Officer Login</a></li>
    </ul>
    <ul id="dropdown4" class="dropdown-content">
        <li><a id="sidenav1" href="#!">Student Register</a></li>
        <li><a id="sidenav1" href="#!">Institute Register</a></li>
        <li><a id="sidenav1" href="#!">Ministry Register</a></li>
        <li><a id="sidenav1" href="#!">Nodal Officer Register</a></li>
      </ul>
  <nav>
    <a href="#" class="sidenav-trigger" data-target="mobile-demo"><i class="material-icons" >menu</i></a>
    <div class="nav-wrapper">
        <ul id="nav-mobile" class="hide-on-med-and-down">
            <li><a class="li-nav" href="#">Home</a></li>
            <li>    
                <div class="center row">
                   <div class="col s12 " >
                     <div class="row" id="topbarsearch">
                       <div class="input-field col s6 s12">
                         <i class="material-icons prefix">search</i>
                         <input type="text" placeholder="Search..." id="autocomplete-input" class="autocomplete li-nav" >
                         </div>
                       </div>
                     </div>
                   </div>          
               </li>
        </ul>
      
      <ul class="right hide-on-small-only">
        <li><a class="dropdown-trigger li-nav" href="#!" data-target="dropdown1">Login<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a class="dropdown-trigger li-nav" href="#!" data-target="dropdown2">Register<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a class="li-nav" href="#">About Us</a></li>
        <li><a class="li-nav" href="#">Contact Us</a></li>
      </ul>
    </div>
    <ul class="sidenav" id="mobile-demo">
        <li><a id="sidenav1 show-on-large" href="#home">Home</a></li>
        <li><a id="sidenav1" class="dropdown-trigger" href="#!" data-target="dropdown3">Login<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a id="sidenav1" class="dropdown-trigger" href="#!" data-target="dropdown4">Register<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a id="sidenav1" href="#aboutus">About Us</a></li>
        <li><a id="sidenav1" href="#contactus">Contact Us</a></li>
    </ul>
  </nav>
  <nav>
    <div class="nav-wrapper">
      <a id="logo-nav" href="#!" class="brand-logo center">National Scholarship Portal</a>
    </div>
  </nav>
</header>
  <script>  
    $(document).ready(function(){
        $('.dropdown-trigger').dropdown({inDuration: 300, outDuration: 100, coverTrigger: false, alignment: 'center',});
        $('.sidenav').sidenav();
        $('.parallax').parallax();
     });
  </script>
</body>
</html>

解决方案

核心原因：Materialize的JS依赖jQuery，且原生的$(document).ready无法适配Angular的DOM渲染生命周期，必须在Angular组件的视图初始化完成后再调用Materialize的初始化方法。

步骤1：安装依赖（替代CDN，适配Angular）

在项目根目录执行命令：

npm install materialize-css jquery

步骤2：配置Angular.json引入资源

打开angular.json，在build.options下的styles和scripts数组中添加：

"styles": [
  "node_modules/materialize-css/dist/css/materialize.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/materialize-css/dist/js/materialize.min.js"
]

同时在src/index.html的<head>中加入Material Icons字体：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

步骤3：创建导航栏Angular组件

执行命令生成组件：

ng generate component navbar

将原HTML中的导航栏内容（<header>内的所有代码）复制到navbar.component.html，并移除原HTML中的所有CDN引入、底部初始化脚本。同时修复模板中的语法错误：

<!-- 修正原模板中的类名错误 -->
<li><a id="sidenav1" class="show-on-large" href="#home">Home</a></li>

步骤4：在组件类中初始化Materialize组件

修改navbar.component.ts，利用AfterViewInit钩子在视图渲染完成后初始化组件：

import { Component, AfterViewInit } from '@angular/core';
declare var $: any; // 声明jQuery避免类型报错

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // 初始化Dropdown
    $('.dropdown-trigger').dropdown({
      inDuration: 300,
      outDuration: 100,
      coverTrigger: false,
      alignment: 'center'
    });
    // 初始化SideNav
    $('.sidenav').sidenav();
  }
}

将原CSS代码复制到navbar.component.css中。

步骤5：使用导航栏组件

在app.component.html中引入导航栏组件：

<app-navbar></app-navbar>

内容的提问来源于stack exchange，提问作者Riya Pal

Angular中Materialize CSS下拉菜单与侧边导航无响应的解决求助

原CSS代码 #

原HTML代码 #

步骤1：安装依赖（替代CDN，适配Angular） #

步骤2：配置Angular.json引入资源 #

步骤3：创建导航栏Angular组件 #

步骤4：在组件类中初始化Materialize组件 #

步骤5：使用导航栏组件 #