Angular TypeScript中如何跨组件监听已触发的事件？

1. 共享服务方案（无关联组件首选） #

如果两个组件没有直接父子关系，用共享服务是最通用的跨组件通信方式：

步骤1：创建共享服务 #

// loader.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LoaderService {
  // 用Subject承载事件流
  private loaderStatus$ = new Subject<boolean>();
  // 暴露可观察对象供外部订阅
  public loaderStatusObservable$ = this.loaderStatus$.asObservable();

  // 统一的事件触发方法
  emitLoaderStatus(status: boolean) {
    this.loaderStatus$.next(status);
  }
}

步骤2：修改触发事件的组件 #

替换原有的emit调用，改用服务方法触发：

// 触发事件的组件.ts
import { LoaderService } from './loader.service';

constructor(private loaderService: LoaderService) {}

someFunction() {
  // 替换this.loaderLoader.emit(true)
  this.loaderService.emitLoaderStatus(true);
}

步骤3：在目标组件中监听事件 #

// 监听事件的组件.ts
import { LoaderService } from './loader.service';
import { Subscription } from 'rxjs';

private loaderSubscription!: Subscription;

constructor(private loaderService: LoaderService) {}

ngOnInit() {
  // 订阅事件流
  this.loaderSubscription = this.loaderService.loaderStatusObservable$.subscribe(status => {
    // 这里编写你的业务逻辑，比如控制加载器显示/隐藏
    console.log('加载状态更新：', status);
  });
}

ngOnDestroy() {
  // 组件销毁时取消订阅，避免内存泄漏
  this.loaderSubscription?.unsubscribe();
}

2. 父子组件直接通信 #

如果两个组件是父子关系，可通过@Output+事件绑定实现：

触发组件（父组件示例） #

// parent.component.ts
import { Output, EventEmitter } from '@angular/core';

@Output() loaderStatus = new EventEmitter<boolean>();

someFunction() {
  this.loaderStatus.emit(true);
}

监听组件（子组件） #

先在父组件模板中绑定事件：

<!-- parent.component.html -->
<app-child (loaderStatus)="handleLoaderChange($event)"></app-child>

再在子组件中实现处理逻辑：

// child.component.ts
handleLoaderChange(status: boolean) {
  console.log('接收到加载状态：', status);
  // 执行对应业务操作
}

额外提示 #

• 用async管道可以自动处理订阅与取消，避免手动管理订阅：

<!-- 监听组件模板中使用async管道 -->
<div *ngIf="loaderService.loaderStatusObservable$ | async as status">
 当前加载状态：{{ status }}
</div>
- 若使用其他框架（Vue/React），核心思路一致：通过全局状态管理工具（Pinia/Redux）或发布订阅模式实现跨组件事件监听。

内容的提问来源于stack exchange，提问作者Muhammad Fahad