Angular中使用Service传递数据失败问题求助

你的核心问题在于：

1. 全局常量存储的数据无法通过Observable实时推送更新，of()仅会发射一次初始数组快照，后续数组变化无法通知订阅组件。
2. 直接操作全局数组而非通过Service统一管理状态，导致路由切换时组件无法获取最新数据。

步骤1：重构Service，用BehaviorSubject管理状态 #

将数据移至Service内部，使用BehaviorSubject保存状态——它会留存最新数据，新订阅者能立即获取当前值，数据变化时自动推送更新：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Appointment } from './your-appointment.model'; // 替换为你的Appointment模型路径

@Injectable({
  providedIn: 'root' // 确保Service为单例
})
export class AppointmentService {
  // 私有Subject，仅内部修改状态
  private appointmentListSubject = new BehaviorSubject<Appointment[]>([]);
  // 对外暴露只读Observable，组件仅能订阅不能修改
  appointmentList$: Observable<Appointment[]> = this.appointmentListSubject.asObservable();

  constructor() {}

  // 添加预约的统一方法
  addAppointment(appointment: Appointment): void {
    const currentList = this.appointmentListSubject.value;
    // 创建新数组触发更新（避免引用类型直接修改无法被检测）
    this.appointmentListSubject.next([...currentList, appointment]);
  }
}

步骤2：修改Input组件，通过Service添加预约 #

不再直接操作全局数组，改用Service的方法提交新预约：

import { Component } from '@angular/core';
import { AppointmentService } from './appointment.service';
import { Appointment } from './your-appointment.model';

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html'
})
export class InputComponent {
  // 你的组件字段：id, userName, dayName等
  id: number;
  userName: string;
  dayName: string;
  intervalVal: any;
  procecess: string;
  totalPrice: number;

  constructor(private appointmentService: AppointmentService) {}

  addNewAppointment(): void {
    const newAppointment = new Appointment(this.id, this.userName, this.dayName, this.intervalVal, this.procecess, this.totalPrice);
    this.appointmentService.addAppointment(newAppointment);
    
    // 重置表单字段
    this.id = 0;
    this.userName = '';
    // ...其他字段重置
  }
}

步骤3：修改AppointmentComponent，订阅实时数据 #

推荐使用async管道自动管理订阅（无需手动销毁，避免内存泄漏）：

组件类代码

import { Component } from '@angular/core';
import { AppointmentService } from './appointment.service';
import { Observable } from 'rxjs';
import { Appointment } from './your-appointment.model';

@Component({
  selector: 'app-appointments',
  templateUrl: './appointments.component.html'
})
export class AppointmentComponent {
  // 直接绑定Service的Observable
  appointList$: Observable<Appointment[]>;

  constructor(private appointmentService: AppointmentService) {
    this.appointList$ = this.appointmentService.appointmentList$;
  }
}

模板代码

<div *ngFor="let appointment of appointList$ | async">
  <!-- 渲染预约信息 -->
  <p>用户：{{appointment.userName}}</p>
  <p>日期：{{appointment.dayName}}</p>
  <p>总价：{{appointment.totalPrice}}</p>
  <!-- 其他字段 -->
</div>

关键说明 #

• BehaviorSubject确保无论何时路由到Appointment组件，都能立即获取最新的预约列表。
• 每次添加预约时创建新数组，而非直接修改原数组，保证BehaviorSubject能检测到变化并推送更新。
• providedIn: 'root'确保Service在整个应用中是单例，数据状态全局统一。

内容的提问来源于stack exchange，提问作者Ferhat Arda Ersoy