Angular 2组件间通信问题：ApiService中Emitter调用无效

看起来你遇到的核心问题是在服务中使用EventEmitter传递状态并不是Angular推荐的做法，而且很可能因为实例不共享或者组件订阅方式不对，导致加载状态无法正常传递。下面给你一套符合Angular最佳实践的解决方案，用RxJS的Subject来实现跨组件/服务的加载状态同步：

第一步：修改ApiService，用RxJS Subject替代EventEmitter #

EventEmitter本质是RxJS Subject的封装，但它是专门为组件间的@Output父子通信设计的，服务里应该用原生的RxJS类型来实现状态共享。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { finalize } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class ApiService {
  // 用Subject存储加载状态，外部只能订阅不能直接修改
  private _loadingStatus = new Subject<boolean>();
  // 暴露可观察对象给外部组件订阅
  public loadingStatus$ = this._loadingStatus.asObservable();

  constructor(private http: HttpClient) {}

  apiGet(url: string) {
    // 发起请求前，发送"加载中"状态
    this._loadingStatus.next(true);
    
    return this.http.get(url).pipe(
      // 不管请求成功/失败，最终都会触发这个操作，发送"加载完成"状态
      finalize(() => this._loadingStatus.next(false))
    );
  }

  // 你的post等其他方法也可以用同样的方式处理加载状态
  apiPost(url: string, body: any) {
    this._loadingStatus.next(true);
    return this.http.post(url, body).pipe(
      finalize(() => this._loadingStatus.next(false))
    );
  }
}

第二步：在PublicComponent中订阅加载状态 #

组件不需要通过<api>标签的事件绑定来接收状态，直接订阅服务的loadingStatus$即可：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ApiService } from './api.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'public',
  templateUrl: './public.component.html'
})
export class PublicComponent implements OnInit, OnDestroy {
  public isLoading = false;
  private _loadingSubscription!: Subscription;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    // 订阅服务的加载状态流
    this._loadingSubscription = this.apiService.loadingStatus$.subscribe(status => {
      this.isLoading = status;
      // 这里可以根据状态做额外逻辑，比如控制Spinner显示
    });

    // 调用你的apiGet方法测试
    this.apiService.apiGet('/your-target-api').subscribe(response => {
      // 处理接口返回数据
    });
  }

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

第三步：更新模板，绑定加载状态到Spinner #

假设你的Spinner组件选择器是<spinner>，直接用*ngIf控制显示：

<!-- 加载动画，isLoading为true时显示 -->
<spinner *ngIf="isLoading"></spinner>
<router-outlet></router-outlet>

为什么原来的方式无效？ #

1. EventEmitter的设计用途：它是为组件间的父子通信（@Output）设计的，服务中使用它不符合Angular的设计规范，而且可能存在实例不共享的问题；
2. 订阅方式错误：你原来用<api (isLoading)='fIsLoading($event)'>的方式，是订阅组件的@Output事件，但服务里的Emitter和这个组件的@Output并不是同一个实例，所以状态无法传递到组件。

用RxJS Subject的方式，因为服务是单例（providedIn: 'root'），所有组件订阅的都是同一个状态流，能保证状态同步，同时也符合Angular的最佳实践。

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