如何在Angular的create与actuator组件中同步mat-select值

针对你的场景——Actuator组件表格行点击编辑打开Create对话框，二者的mat-select需要值同步，这里提供两种实用方案：

方案一：使用共享服务管理状态（推荐复杂场景） #

适合组件无直接父子关系、需多组件共享状态的场景，通过服务维护模式值的全局状态。

1. 创建共享状态服务 #

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

@Injectable({ providedIn: 'root' })
export class ActuatorModeService {
  private modeSubject = new BehaviorSubject<string>('');
  currentMode$: Observable<string> = this.modeSubject.asObservable();

  updateMode(mode: string): void {
    this.modeSubject.next(mode);
  }
}

2. Actuator组件中对接服务 #

点击编辑按钮时同步当前行模式到服务，同时订阅服务状态更新表格：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { CreateComponent } from './create/create.component';
import { ActuatorModeService } from './actuator-mode.service';

@Component({
  selector: 'app-actuator',
  templateUrl: './actuator.component.html',
})
export class ActuatorComponent {
  actuatorData = [ /* 你的表格数据，例：{ id: 1, mode: 'automatic' } */ ];

  constructor(private dialog: MatDialog, private modeService: ActuatorModeService) {}

  openEditDialog(row: any): void {
    // 将当前行模式同步到服务
    this.modeService.updateMode(row.mode);
    const dialogRef = this.dialog.open(CreateComponent, {
      data: { actuatorId: row.id } // 传递行ID用于定位更新
    });

    // 订阅模式变化，实时更新表格对应行
    const modeSubscription = this.modeService.currentMode$.subscribe(newMode => {
      if (newMode) {
        const targetRow = this.actuatorData.find(item => item.id === row.id);
        if (targetRow) targetRow.mode = newMode;
      }
    });

    // 对话框关闭时取消订阅，避免内存泄漏
    dialogRef.afterClosed().subscribe(() => modeSubscription.unsubscribe());
  }
}

3. Create组件绑定服务状态 #

订阅服务初始化选中值，提交时更新服务同步到Actuator组件：

import { Component, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Inject } from '@angular/core';
import { ActuatorModeService } from '../actuator-mode.service';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
})
export class CreateComponent implements OnInit {
  selectedMode: string = '';
  modeOptions = ['automatic', 'manual', 'periodic'];

  constructor(
    private dialogRef: MatDialogRef<CreateComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private modeService: ActuatorModeService
  ) {}

  ngOnInit(): void {
    // 从服务获取初始模式值
    this.modeService.currentMode$.subscribe(mode => this.selectedMode = mode);
  }

  onSubmit(): void {
    // 提交时更新服务模式，同步到Actuator组件
    this.modeService.updateMode(this.selectedMode);
    this.dialogRef.close();
  }
}

Create组件mat-select绑定：

<mat-select [(ngModel)]="selectedMode">
  <mat-option *ngFor="let mode of modeOptions" [value]="mode">
    {{ mode }}
  </mat-option>
</mat-select>
<button mat-button (click)="onSubmit()">提交</button>

方案二：利用MatDialog输入输出（适合简单场景） #

通过对话框的输入传递初始值，关闭时返回新值给父组件，无需依赖服务。

1. Actuator组件传递初始值并接收返回结果 #

openEditDialog(row: any): void {
  const dialogRef = this.dialog.open(CreateComponent, {
    data: { 
      actuatorId: row.id,
      initialMode: row.mode // 传递当前行模式作为初始值
    }
  });

  // 对话框关闭后，用返回值更新表格
  dialogRef.afterClosed().subscribe(result => {
    if (result?.newMode) {
      const targetRow = this.actuatorData.find(item => item.id === row.id);
      if (targetRow) targetRow.mode = result.newMode;
    }
  });
}

2. Create组件接收初始值并返回新值 #

import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
})
export class CreateComponent {
  selectedMode: string = '';
  modeOptions = ['automatic', 'manual', 'periodic'];

  constructor(
    private dialogRef: MatDialogRef<CreateComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    // 初始化选中值为传入的初始模式
    this.selectedMode = data.initialMode;
  }

  onSubmit(): void {
    // 提交时返回新模式值
    this.dialogRef.close({ newMode: this.selectedMode });
  }
}

Create组件的mat-select绑定与方案一一致，无需额外修改。

注意事项 #

• 方案一中若使用async管道绑定currentMode$，可自动处理订阅与取消，避免手动管理泄漏。
• 确保两个组件的mat-option值完全一致（如均为字符串'automatic'），避免匹配异常。
• 若表格数据来自后端，提交后需调用接口更新后端数据，再同步前端表格。

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