如何用Material2正确实现加载/Spinner遮罩层？

嘿，我来帮你理清楚正确的实现姿势～ 首先明确说：完全不需要修改你原有的<body> <app-root></app-root> </body>结构，Angular Material CDK的Overlay模块本身就是为了在全局层级创建独立于组件树的覆盖层设计的，不用额外套div来切换类。

下面是标准实现步骤：

1. 准备依赖与模块导入 #

首先确保你已经安装了@angular/cdk，如果没有的话执行：

npm install @angular/cdk
# 或者用yarn
yarn add @angular/cdk

然后在你的AppModule（或共享模块）中导入OverlayModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { OverlayModule } from '@angular/cdk/overlay';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; // 如果用Material加载动画的话

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    OverlayModule,
    MatProgressSpinnerModule // 可选，用于加载动画
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 创建加载遮罩组件 #

新建一个LoadingOverlayComponent，用来承载加载动画和遮罩样式：

<!-- loading-overlay.component.html -->
<div class="loading-container">
  <mat-spinner diameter="50" color="accent"></mat-spinner>
</div>

/* loading-overlay.component.css */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

3. 封装遮罩管理服务 #

创建一个全局服务来统一控制遮罩的显示/隐藏，这样可以在任何组件中调用：

import { Injectable } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { LoadingOverlayComponent } from './loading-overlay/loading-overlay.component';

@Injectable({ providedIn: 'root' })
export class LoadingOverlayService {
  private overlayRef: OverlayRef | null = null;

  constructor(private overlay: Overlay) {}

  // 显示遮罩
  show(): void {
    if (!this.overlayRef) {
      this.overlayRef = this.overlay.create({
        // 设置全局居中
        positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
        // 开启背景遮罩
        hasBackdrop: true,
        // 使用Material自带的暗色背景类，也可以自定义
        backdropClass: 'cdk-overlay-dark-backdrop'
      });
      // 挂载加载组件到遮罩层
      this.overlayRef.attach(new ComponentPortal(LoadingOverlayComponent));
    }
  }

  // 隐藏遮罩
  hide(): void {
    if (this.overlayRef) {
      this.overlayRef.detach();
      this.overlayRef.dispose();
      this.overlayRef = null;
    }
  }
}

4. 在业务组件中使用 #

比如在AppComponent中，发起HTTP请求时调用服务显示/隐藏遮罩：

import { Component } from '@angular/core';
import { LoadingOverlayService } from './loading-overlay.service';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="fetchData()" class="load-btn">点击加载数据</button>
  `,
  styles: [`
    .load-btn {
      padding: 8px 16px;
      font-size: 16px;
    }
  `]
})
export class AppComponent {
  constructor(
    private loadingService: LoadingOverlayService,
    private http: HttpClient
  ) {}

  fetchData(): void {
    this.loadingService.show();
    this.http.get('https://api.example.com/data')
      .subscribe({
        next: (data) => {
          console.log('数据加载完成:', data);
        },
        complete: () => {
          this.loadingService.hide();
        },
        error: () => {
          this.loadingService.hide();
          alert('加载失败');
        }
      });
  }
}

为什么不需要修改原有HTML结构？ #

CDK Overlay会自动把遮罩元素附加到<body>标签下（或者通过配置指定其他容器），完全独立于你的app-root组件树。这种方式比手动切换div类更符合Angular Material的设计理念，也更灵活——比如你可以轻松切换遮罩的位置、背景样式，甚至把遮罩限定在某个局部容器内（只需调整positionStrategy即可）。

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