Angular 5嵌套组件中固定定位Div作为全局背景遮罩的问题

先聊聊你可能碰到的几个常见坑，再一步步给出靠谱的解决方案：

一、先解决遮罩的全屏显示与层级问题 #

你写的.mask样式逻辑是对的，但如果把遮罩放在子组件模板里，很容易因为父/子组件的position: relative或自定义z-index设置，导致遮罩被限制在子路由的router-outlet区域内，或者被其他元素压在下面。

正确姿势：把遮罩放在根组件里 #

直接把遮罩的HTML加到根组件（比如app.component.html）中，让它属于应用最外层，彻底摆脱嵌套路由的布局限制：

<!-- app.component.html -->
<router-outlet></router-outlet>

<!-- 全局加载遮罩 -->
<div class="mask" *ngIf="isLoading">
  <!-- 可以加个加载动画提升体验 -->
  <div class="loader"></div>
</div>

优化后的样式（比原来的更稳妥）：

.mask {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh; /* 用vh替代100%，避免滚动条导致的显示不全 */
  width: 100vw;
  z-index: 9999; /* 设得比你应用里所有元素的z-index都高 */
  background-color: rgba(0,0,0,0.7);
  pointer-events: auto; /* 阻止用户点击遮罩下方的元素，不需要可以去掉 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

二、全局管理加载状态 #

因为多个子路由组件都会调用API，零散维护状态很容易出冲突，所以用一个全局服务来统一管理isLoading状态：

1. 创建加载状态服务 #

// loading.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LoadingService {
  private isLoadingSubject = new BehaviorSubject<boolean>(false);
  isLoading$ = this.isLoadingSubject.asObservable();
  private requestCount = 0; // 处理多API请求的计数器

  setLoading(state: boolean) {
    if (state) {
      this.requestCount++;
      this.isLoadingSubject.next(true);
    } else {
      this.requestCount--;
      // 只有所有请求都完成时才关闭遮罩
      if (this.requestCount === 0) {
        this.isLoadingSubject.next(false);
      }
    }
  }
}

2. 根组件订阅状态 #

// app.component.ts
import { Component } from '@angular/core';
import { LoadingService } from './loading.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isLoading = false;

  constructor(private loadingService: LoadingService) {
    this.loadingService.isLoading$.subscribe(state => {
      this.isLoading = state;
    });
  }
}

3. 子组件中调用服务 #

比如某个子路由组件发起API请求时：

// child.component.ts
import { Component } from '@angular/core';
import { LoadingService } from '../loading.service';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  constructor(private loadingService: LoadingService, private http: HttpClient) {}

  fetchData() {
    this.loadingService.setLoading(true);
    this.http.get('your-api-url').subscribe({
      next: (data) => {
        // 处理返回数据
      },
      error: (err) => {
        // 处理错误
      },
      complete: () => {
        this.loadingService.setLoading(false);
      }
    });
  }
}

三、进阶优化：自动拦截HTTP请求管理遮罩 #

不想每个API调用都手动写状态切换？用Angular的HTTP拦截器自动处理：

1. 创建HTTP拦截器 #

// loading.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { LoadingService } from './loading.service';

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {
  constructor(private loadingService: LoadingService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    this.loadingService.setLoading(true);
    return next.handle(request).pipe(
      finalize(() => {
        this.loadingService.setLoading(false);
      })
    );
  }
}

2. 在模块中注册拦截器 #

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { LoadingInterceptor } from './loading.interceptor';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

这样所有HTTP请求都会自动触发遮罩，多个请求并行时，只有最后一个请求完成才会关闭遮罩，完全不用手动写状态切换！

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