技术求助：是否有人用Angular（v6优先）+Materializecss 1.0.0成功构建应用？

Absolutely! I’ve built several Angular 6+ applications using Materialize CSS 1.0.0 (both beta and release candidate versions) with TypeScript, so I can share practical steps and patterns to make this work seamlessly—since the official docs are still light on Angular-specific guidance.

Key Setup Steps #

1. Install Dependencies #

First, install the latest 1.0.0 build and its TypeScript type definitions:

npm install materialize-css@next @types/materialize-css --save

The @next tag pulls the latest pre-release version (beta/RC) of Materialize CSS.

2. Configure Angular CLI #

Update your angular.json file to include Materialize’s CSS and JS files globally:

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

Using Materialize Components in TypeScript #

Most Materialize components require manual initialization (unlike Angular Material’s auto-initialized components). Here’s how to handle this properly in Angular:

Basic Component Initialization #

For example, initializing a dropdown menu in a component:

import { Component, AfterViewInit } from '@angular/core';
// If @types are working correctly, you can import M directly:
import * as M from 'materialize-css';

@Component({
  selector: 'app-demo-dropdown',
  template: `
    <ul id="demo-dropdown" class="dropdown-content">
      <li><a href="#!">Option 1</a></li>
      <li><a href="#!">Option 2</a></li>
    </ul>
    <a class="btn dropdown-trigger" href="#!" data-target="demo-dropdown">
      Open Dropdown <i class="material-icons right">arrow_drop_down</i>
    </a>
  `
})
export class DemoDropdownComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // Initialize dropdown after the DOM is fully rendered
    const dropdownElements = document.querySelectorAll('.dropdown-trigger');
    M.Dropdown.init(dropdownElements, {
      hover: true, // Optional configuration
      coverTrigger: false
    });
  }
}

Always use ngAfterViewInit instead of ngOnInit to ensure DOM elements exist before initialization.

Advanced: Wrap Components as Angular Directives #

For better reusability and Angular-style patterns, wrap Materialize components into custom directives. Here’s an example for dropdowns:

import { Directive, ElementRef, AfterViewInit, Input } from '@angular/core';
import * as M from 'materialize-css';

@Directive({
  selector: '[appMaterializeDropdown]'
})
export class MaterializeDropdownDirective implements AfterViewInit {
  @Input() dropdownOptions: Partial<M.DropdownOptions> = {};

  constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    M.Dropdown.init(this.el.nativeElement, this.dropdownOptions);
  }
}

Then use it in your template like this:

<a class="btn dropdown-trigger" 
   appMaterializeDropdown 
   [dropdownOptions]="{hover: true}"
   data-target="demo-dropdown">
  Open Dropdown <i class="material-icons right">arrow_drop_down</i>
</a>

Common Pitfalls to Avoid #

• DOM Timing: Never initialize components in ngOnInit—wait for ngAfterViewInit to ensure elements are rendered.
• Type Definitions: If you run into type errors, double-check that @types/materialize-css is installed and up-to-date. If issues persist, you can temporarily use declare var M: any; to bypass type checks.
• HTML Structure: Follow Materialize 1.0.0’s exact HTML markup for components (e.g., proper classes for inputs, cards, or modals)—small deviations can break initialization.

内容的提问来源于stack exchange，提问作者john.acb