1. 确认已经安装了 Materialize CSS

npm install materialize-css

2. 在你的组件中导入 Materialize CSS 相关模块和样式

import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';

3. 确认你的 HTML 模板中有 Materialize CSS Modal 的标记

Click me

  

    
Modal Header
    
A bunch of text
  
  

    Agree
  

4. 在组件中使用 ElementRef 获取 modal 元素，并初始化 modal

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

declare var M: any; // 确认全局变量 M 存在

@Component({
  selector: 'app-modal-demo',
  templateUrl: './modal-demo.component.html',
  styleUrls: ['./modal-demo.component.css']
})
export class ModalDemoComponent implements OnInit {

  constructor(private elementRef: ElementRef) {}

  ngOnInit() {
    // 获取 modal 元素
    const modalElem = this.elementRef.nativeElement.querySelector('.modal');
    // 初始化 modal
    const modalInstance = new M.Modal(modalElem);
  }

}

5. 现在你可以在组件中调用打开或关闭 modal 的方法了

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

declare var M: any;

@Component({
  selector: 'app-modal-demo',
  templateUrl: './modal-demo.component.html',
  styleUrls: ['./modal-demo.component.css']
})
export class ModalDemoComponent implements OnInit {

  constructor(private elementRef: ElementRef) {}

  ngOnInit() {
    const modalElem = this.elementRef.nativeElement.querySelector('.modal');
    const modalInstance = new M.Modal(modalElem);
    
    // 打开 modal 的方法