Angular 5中使用materialize-css v1.0.0无效，已尝试方案仍未解决

我之前也踩过类似的坑，结合Angular的生命周期特性和Materialize的初始化逻辑，给你几个针对性的排查和解决方向：

1. 先确认依赖安装与全局配置是否到位 #

• 首先确保依赖安装正确：

  npm install materialize-css@1.0.0 --save
  npm install @types/materialize-css --save-dev
  

• 针对Angular 5，需要在.angular-cli.json里配置全局资源：
  在styles数组中添加Materialize的CSS：

  "../node_modules/materialize-css/dist/css/materialize.min.css"
  

  在scripts数组中添加Materialize的JS：

  "../node_modules/materialize-css/dist/js/materialize.min.js"
  

2. 修正组件内的初始化逻辑 #

你已经用到了AfterViewInit，但可能初始化时机或方式不够精准，试试这样调整代码：

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
// 简化导入路径，直接引用materialize-css即可
import * as M from 'materialize-css';

@Component({
  selector: 'app-list-nav',
  templateUrl: './list-nav.component.html',
  styleUrls: ['./list-nav.component.css']
})
export class ListNavComponent implements OnInit, AfterViewInit {
  // 用ViewChild精准绑定模板中的导航元素
  @ViewChild('navList') navList!: ElementRef;

  constructor() { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    // 确保DOM完全渲染后再初始化对应组件
    // 这里以侧边栏导航为例，其他组件（如下拉、Tabs）替换对应的初始化方法即可
    if (this.navList.nativeElement) {
      M.Sidenav.init(this.navList.nativeElement);
    }
  }
}

然后在模板list-nav.component.html中给目标元素添加模板引用：

<ul #navList class="sidenav">
  <!-- 你的导航项内容 -->
</ul>

3. 避开常见的坑点 #

• 绝对不要在ngOnInit中初始化Materialize，此时DOM还未完全渲染，无法定位到目标元素
• 如果是动态生成的导航内容（比如从接口加载的菜单），需要在数据加载完成后重新调用初始化方法
• 检查是否和Angular Material等其他UI库冲突，两者部分类名可能重叠导致样式或功能异常

4. 调试验证 #

启动项目后打开浏览器控制台：

• 如果提示M is undefined，说明全局脚本路径配置错误，检查.angular-cli.json中的路径是否和项目结构匹配
• 如果提示元素找不到，核对ViewChild的引用名和模板中的是否一致，也可以临时用document.querySelector定位元素测试初始化逻辑

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