Angular中如何获取EventEmitter的最后一次发射值？

一、为什么takeLast(1)拿不到最后一次发射的值？ #

takeLast(1)需要等待源Observable**完成（complete）**后，才会吐出最后一个值。但你用的EventEmitter是持续监听发射状态的，不会主动触发complete，所以永远不会输出结果。

下面给你两种靠谱的解决方式：

方案1：换成BehaviorSubject（推荐，完全匹配你的需求） #

BehaviorSubject本身会保存最后一次发射的值，新订阅的观察者会立即拿到当前的最新值，完美满足你取最后一次值的场景：

服务端代码修改：

import { Injectable, BehaviorSubject } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AssessmentResponseDataService {
  // 用BehaviorSubject替代EventEmitter，设置初始默认值（比如false）
  private _openReportsSidePanel = new BehaviorSubject<boolean>(false);
  // 对外暴露只读的Observable，防止外部直接修改值
  openReportsSidePanel$ = this._openReportsSidePanel.asObservable();

  viewReportsSidePanel(value: boolean) {
    // 用next()替代emit()发射值
    this._openReportsSidePanel.next(value);
  }
}

组件端获取值：

• 持续监听最新值：

this._assessmentResponseDataService.openReportsSidePanel$.subscribe(value => {
  console.log('当前最新值:', value);
});

• 只拿一次当前最新值（不需要持续监听）：

import { take } from 'rxjs/operators';

this._assessmentResponseDataService.openReportsSidePanel$
  .pipe(take(1))
  .subscribe(value => {
    console.log('当前最后一次发射的值:', value);
  });

方案2：保留EventEmitter，手动保存最后值 #

如果不想替换EventEmitter，可以在服务里加个变量专门存最后一次发射的值：

服务端代码修改：

import { Injectable, Output, EventEmitter } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AssessmentResponseDataService {
  @Output() openReportsSidePanel: EventEmitter<boolean> = new EventEmitter<boolean>();
  // 手动保存最后一次的值，设个初始默认值
  private _lastSidePanelValue = false;

  viewReportsSidePanel(value: boolean) {
    this._lastSidePanelValue = value;
    this.openReportsSidePanel.emit(value);
  }

  // 对外提供获取最后值的方法
  getLastSidePanelValue(): boolean {
    return this._lastSidePanelValue;
  }
}

组件端获取值：

• 直接拿当前最后值：

console.log('最后一次发射的值:', this._assessmentResponseDataService.getLastSidePanelValue());

• 同时监听发射事件：

this._assessmentResponseDataService.openReportsSidePanel.subscribe(value => {
  console.log('当前发射的值:', value);
});

二、保证HTTP请求仅调用一次 #

可以用shareReplay(1)缓存请求结果，后续所有订阅都会直接复用缓存的数据，不会重复发起请求：

服务端代码示例：

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class YourDataService {
  // 缓存请求的Observable
  private _cachedData$: Observable<any> | null = null;

  constructor(private http: HttpClient) {}

  fetchData(): Observable<any> {
    // 如果缓存不存在，才发起请求
    if (!this._cachedData$) {
      this._cachedData$ = this.http.get('你的API地址').pipe(
        shareReplay(1) // 缓存最后一次的响应结果
      );
    }
    return this._cachedData$;
  }
}

组件端调用：

不管订阅多少次，只会发起一次HTTP请求：

// 第一次订阅，发起请求
this.yourDataService.fetchData().subscribe(data => {
  console.log('请求结果:', data);
});

// 第二次订阅，直接用缓存，不发请求
this.yourDataService.fetchData().subscribe(data => {
  console.log('缓存结果:', data);
});

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