Angular 中通过 Injector 动态获取 LoadingService 实现全屏蒙层控制，支持跨层级调用、嵌套防抖、拦截器自动触发及指令式绑定，解耦 UI 与业务逻辑。
在 Angular 应用中，通过 Injector 动态获取服务并控制全屏 Loading 蒙层，能解耦 UI 层与业务逻辑，避免手动管理显隐状态。核心思路是：让任意组件/服务在需要时“按需触发”蒙层，且不依赖具体 DOM 或模板引用。
利用 Injector 实现跨层级自动注入与控制
不推荐在每个组件里重复注入 loadingService，而是封装一个可复用的“指令式调用入口”。关键在于将 Injector 作为桥梁，在任意上下文（组件、服务、拦截器）中安全获取服务实例：
- 在根模块或共享模块中提供
LoadingService（providedIn: 'root'），确保单例 - 定义一个轻量工具函数（如
showLoading()/hideLoading()），内部通过当前 injector 获取服务 - 若在非注入上下文（如普通工具函数、事件回调）中调用，需提前保存根 injector（
AppModule.injector）或使用inject()（Angular 14+）
LoadingService 封装交互逻辑与状态管理
该服务应聚焦三件事：状态维护、DOM 控制、防抖/嵌套保护。不直接操作模板，而是通过 Renderer2 或 Document 安全插入/移除蒙层元素：
- 用
Subject<boolean></boolean>广播显隐状态，供AsyncPipe或OnPush组件响应 - 维护计数器（
pendingCount），支持嵌套调用：每次show()+1，hide()-1，仅当归零时真正隐藏 - 可选集成
NgZone确保 DOM 更新在正确区域执行，避免变更检测异常
在 HTTP 拦截器中自动触发（最常用场景）
这是“自动控制”的典型落地点。拦截器本身无法直接注入服务（因构造函数注入限制），但可通过 Injector 解决：
- 在拦截器
constructor中接收Injector参数（Angular 支持） -
intercept()中调用this.injector.get(LoadingService).show()，并在finalize中hide() - 为避免请求并发导致蒙层闪烁，配合计数器 + 延迟隐藏（如
timer(300)）更平滑
自定义指令实现模板级一键绑定
对按钮、表单等需要手动触发的场景，封装 appLoading 指令：
- 指令监听
click或submit，自动调用LoadingService.show() - 结合
Promise或Observable返回值，在完成时自动hide() - 支持输入参数如
[appLoading]="apiCall$"，指令内订阅并托管生命周期
不复杂但容易忽略的是：蒙层元素必须挂载到 document.body 顶层，避开组件视图封装影响；同时注意服务销毁时清理计时器和订阅，防止内存泄漏。
