Angular 16自定义组件多实例间事件与数据共享问题

先排查几个最可能导致基于Subject的共享服务失效的关键点：

1. 服务是否为单例 #

如果你的FilteringService没有设置providedIn: 'root'，也没在根模块的providers数组中声明，而是在组件的providers里注册，会导致每个<my-component>实例都拥有独立的服务副本，Subject自然无法跨实例共享数据。

2. 订阅时机与内存泄漏 #

组件内的订阅如果没在正确时机初始化（比如晚于数据发布），或者没做销毁处理，会导致订阅失效或内存泄漏。

3. 日期值处理与验证逻辑 #

input的日期值是字符串类型，直接和Date对象比较会出错；另外，其他组件是否正确监听Subject的变化并更新自身的日期限制规则？

修正后的FilteringService（确保单例） #

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root' // 核心：确保全局单例
})
export class FilteringService {
  // 用Subject发布选中的日期，对外暴露Observable避免直接修改
  private _selectedDate$ = new Subject<Date | null>();
  selectedDate$: Observable<Date | null> = this._selectedDate$.asObservable();

  // 对外提供更新日期的方法
  updateSelectedDate(date: Date | null): void {
    this._selectedDate$.next(date);
  }
}

修正后的MyComponent组件 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { FilteringService } from './filtering.service';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'my-component',
  template: `
    <input 
      type="date" 
      [formControl]="dateControl" 
      [min]="minDateString"
    >
  `
})
export class MyComponent implements OnInit, OnDestroy {
  dateControl = new FormControl();
  minDateString = ''; // 用于input的min属性（YYYY-MM-DD格式）
  private _destroy$ = new Subject<void>(); // 用于销毁订阅

  constructor(private filteringService: FilteringService) {}

  ngOnInit(): void {
    // 监听全局选中的日期，更新当前组件的可选范围
    this.filteringService.selectedDate$
      .pipe(takeUntil(this._destroy$))
      .subscribe(globalSelectedDate => {
        if (globalSelectedDate) {
          this.minDateString = this.formatDate(globalSelectedDate);
          // 如果当前组件已选日期早于全局日期，自动清空
          const currentDate = this.dateControl.value ? new Date(this.dateControl.value) : null;
          if (currentDate && currentDate < globalSelectedDate) {
            this.dateControl.reset();
          }
        } else {
          this.minDateString = '';
        }
      });

    // 当前组件选择日期时，通知全局服务
    this.dateControl.valueChanges
      .pipe(takeUntil(this._destroy$))
      .subscribe(selectedDateStr => {
        const selectedDate = selectedDateStr ? new Date(selectedDateStr) : null;
        this.filteringService.updateSelectedDate(selectedDate);
      });
  }

  ngOnDestroy(): void {
    // 销毁所有订阅，避免内存泄漏
    this._destroy$.next();
    this._destroy$.complete();
  }

  // 把Date对象转成input需要的YYYY-MM-DD格式
  private formatDate(date: Date): string {
    return new Date(date.getTime() - (date.getTimezoneOffset() * 60000))
      .toISOString()
      .split('T')[0];
  }
}

进阶优化：支持多组件选日期取最大值 #

如果需要多个组件都能选日期，且所有组件的最小可选日期是所有已选日期中的最大值，可以修改服务逻辑：

// 修改后的FilteringService
@Injectable({ providedIn: 'root' })
export class FilteringService {
  private _selectedDates = new Map<string, Date>(); // 用组件ID追踪每个实例的日期
  private _maxSelectedDate$ = new Subject<Date | null>();
  maxSelectedDate$: Observable<Date | null> = this._maxSelectedDate$.asObservable();

  updateSelectedDate(date: Date | null, componentId: string): void {
    if (date) {
      this._selectedDates.set(componentId, date);
    } else {
      this._selectedDates.delete(componentId);
    }
    // 计算所有已选日期的最大值
    const dates = Array.from(this._selectedDates.values());
    const maxDate = dates.length > 0 
      ? new Date(Math.max(...dates.map(d => d.getTime()))) 
      : null;
    this._maxSelectedDate$.next(maxDate);
  }
}

组件使用时传入唯一ID（比如*ngFor的index）：

// 组件类中添加@Input() componentId: string;
// ngOnInit里监听maxSelectedDate$
this.filteringService.maxSelectedDate$
  .pipe(takeUntil(this._destroy$))
  .subscribe(maxDate => {
    // ... 同之前的逻辑，用maxDate作为min限制
  });

// 日期变化时传入componentId
this.dateControl.valueChanges.subscribe(selectedDateStr => {
  const selectedDate = selectedDateStr ? new Date(selectedDateStr) : null;
  this.filteringService.updateSelectedDate(selectedDate, this.componentId);
});

模板里*ngFor时传入ID：

<my-component *ngFor="let item of items; let i = index" [componentId]="i.toString()"></my-component>

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