Angular三子组件交互咨询：注册/列表/编辑组件数据同步实现

针对你提出的三个子组件数据同步需求，以下是两种可行的修正实现方案：

方案一：@Output + @Input 修正实现 #

问题分析 #

你原实现的核心问题：

• 子组件3未监听@Input变量的变化，仅在初始化时调用一次接口，后续studentId更新时不会触发重新加载
• 子组件1提交表单后，未通知子组件2刷新列表

代码实现 #

1. 父组件

// parent.component.ts
import { Component, ViewChild } from '@angular/core';
import { AdmissionListComponent } from './admission-list/admission-list.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  studentId: number | null = null;
  @ViewChild('studentList') studentListComponent!: AdmissionListComponent;

  // 接收子组件2传递的ID，更新给子组件3
  updateId(id: number) {
    this.studentId = id;
  }

  // 子组件1提交后，触发子组件2刷新列表
  refreshStudentList() {
    this.studentListComponent.loadStudentList();
  }
}

<!-- parent.component.html -->
<app-admission-add (studentAdded)="refreshStudentList()"></app-admission-add>
<app-admission-list #studentList (studentId)="updateId($event)"></app-admission-list>
<app-admission-edit [studentId]="studentId"></app-admission-edit>

2. 子组件1（注册表单）

// admission-add.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-admission-add',
  templateUrl: './admission-add.component.html'
})
export class AdmissionAddComponent {
  @Output() studentAdded = new EventEmitter<void>();
  registerForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.registerForm = this.fb.group({
      name: ['', Validators.required],
      age: ['', Validators.min(18)]
    });
  }

  onSubmit() {
    if (this.registerForm.valid) {
      // 调用注册接口逻辑
      // ...
      // 提交成功后通知父组件刷新列表
      this.studentAdded.emit();
      // 重置表单
      this.registerForm.reset();
    }
  }
}

3. 子组件2（学生列表）

// admission-list.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-admission-list',
  templateUrl: './admission-list.component.html'
})
export class AdmissionListComponent {
  @Output() studentId = new EventEmitter<number>();
  studentList: any[] = [];

  ngOnInit() {
    this.loadStudentList();
  }

  // 获取学生列表接口
  loadStudentList() {
    // 调用接口更新this.studentList
    // ...
  }

  // 点击列表项传递ID
  getStudentId(id: number) {
    this.studentId.emit(id);
  }
}

<!-- admission-list.component.html -->
<div *ngFor="let student of studentList" class="list-item">
  <a (click)="getStudentId(student.id)">{{ student.name }}</a>
</div>

4. 子组件3（编辑表单）

// admission-edit.component.ts
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-admission-edit',
  templateUrl: './admission-edit.component.html'
})
export class AdmissionEditComponent implements OnChanges {
  @Input() studentId: number | null = null;
  editForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.editForm = this.fb.group({
      name: [''],
      age: ['']
    });
  }

  // 监听studentId变化，触发接口加载详情
  ngOnChanges(changes: SimpleChanges) {
    if (changes['studentId'] && this.studentId !== null) {
      this.getStudentById(this.studentId);
    }
  }

  // 根据ID获取学生详情
  getStudentById(id: number) {
    // 调用接口获取详情，填充表单
    // ...
    // 示例：this.editForm.patchValue(studentDetail);
  }
}

方案二：SharedService 响应式实现 #

问题分析 #

你原Service使用普通变量存储ID，组件无法感知变量变化，需通过BehaviorSubject实现响应式通知，确保数据更新时所有订阅组件能同步触发逻辑。

代码实现 #

1. 共享服务

// shared.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  // 选中的学生ID，初始值为null
  private selectedStudentId$ = new BehaviorSubject<number | null>(null);
  // 列表刷新触发信号
  private listRefreshSignal$ = new BehaviorSubject<void>(undefined);

  // 暴露供组件订阅的Observable
  public selectedStudentId: Observable<number | null> = this.selectedStudentId$.asObservable();
  public listRefresh: Observable<void> = this.listRefreshSignal$.asObservable();

  // 更新选中的学生ID
  updateSelectedStudentId(id: number) {
    this.selectedStudentId$.next(id);
  }

  // 触发列表刷新
  triggerListRefresh() {
    this.listRefreshSignal$.next();
  }
}

2. 子组件1（注册表单）

// admission-add.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-admission-add',
  templateUrl: './admission-add.component.html'
})
export class AdmissionAddComponent {
  registerForm: FormGroup;

  constructor(private fb: FormBuilder, private sharedService: SharedService) {
    this.registerForm = this.fb.group({
      name: ['', Validators.required],
      age: ['', Validators.min(18)]
    });
  }

  onSubmit() {
    if (this.registerForm.valid) {
      // 调用注册接口逻辑
      // ...
      // 提交成功后触发列表刷新
      this.sharedService.triggerListRefresh();
      this.registerForm.reset();
    }
  }
}

3. 子组件2（学生列表）

// admission-list.component.ts
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-admission-list',
  templateUrl: './admission-list.component.html'
})
export class AdmissionListComponent implements OnInit {
  studentList: any[] = [];
  private subscription = new Subscription();

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    // 订阅列表刷新信号，自动更新列表
    this.subscription.add(
      this.sharedService.listRefresh.subscribe(() => {
        this.loadStudentList();
      })
    );
    // 初始化加载列表
    this.loadStudentList();
  }

  ngOnDestroy() {
    // 销毁订阅，防止内存泄漏
    this.subscription.unsubscribe();
  }

  loadStudentList() {
    // 调用接口更新this.studentList
    // ...
  }

  onStudentClick(id: number) {
    this.sharedService.updateSelectedStudentId(id);
  }
}

<!-- admission-list.component.html -->
<div *ngFor="let student of studentList" class="list-item">
  <a (click)="onStudentClick(student.id)">{{ student.name }}</a>
</div>

4. 子组件3（编辑表单）

// admission-edit.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { SharedService } from '../shared.service';
import { Subscription } from 'rxjs';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-admission-edit',
  templateUrl: './admission-edit.component.html'
})
export class AdmissionEditComponent implements OnInit, OnDestroy {
  editForm: FormGroup;
  private subscription = new Subscription();

  constructor(private fb: FormBuilder, private sharedService: SharedService) {
    this.editForm = this.fb.group({
      name: [''],
      age: ['']
    });
  }

  ngOnInit() {
    // 订阅选中的学生ID变化
    this.subscription.add(
      this.sharedService.selectedStudentId.subscribe(id => {
        if (id !== null) {
          this.getStudentById(id);
        } else {
          this.editForm.reset();
        }
      })
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  getStudentById(id: number) {
    // 调用接口获取详情，填充表单
    // ...
    // 示例：this.editForm.patchValue(studentDetail);
  }
}

5. 父组件模板（无需额外传递参数）

<!-- parent.component.html -->
<app-admission-add></app-admission-add>
<app-admission-list></app-admission-list>
<app-admission-edit></app-admission-edit>

内容的提问来源于stack exchange，提问作者Besimin A.