如何在Material Dialog与编辑表单组件间传递数据？

嘿，针对你这个Material Dialog传递数据到编辑表单的需求，我给你整理两种实用的方案，都是Angular项目里常用的做法，你可以按需选择：

这种方式适合希望把API调用逻辑集中在编辑表单组件的场景，步骤如下：

1. 在Dialog组件中收集输入并返回
   当用户点击搜索按钮时，先验证输入的数字有效性，再通过dialogRef.close()把数字返回给调用Dialog的组件：

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

@Component({
  selector: 'app-search-dialog',
  templateUrl: './search-dialog.component.html'
})
export class SearchDialogComponent {
  userInputNumber: number;

  constructor(public dialogRef: MatDialogRef<SearchDialogComponent>) {}

  onSearchClick() {
    // 先做基础校验
    if (!isNaN(this.userInputNumber) && this.userInputNumber > 0) {
      this.dialogRef.close(this.userInputNumber);
    } else {
      // 提示用户输入有效数字，比如用MatSnackBar
    }
  }

  onCancel() {
    this.dialogRef.close(null);
  }
}

对应的Dialog模板可以是一个数字输入框+搜索/取消按钮，用[(ngModel)]绑定userInputNumber即可。

2. 调用Dialog的组件接收数字并传递到编辑页
   在打开Dialog的组件里，订阅afterClosed()方法拿到返回的数字，之后通过路由参数或者服务传递给编辑表单：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { SearchDialogComponent } from './search-dialog.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  constructor(private dialog: MatDialog, private router: Router) {}

  openSearchModal() {
    const dialogRef = this.dialog.open(SearchDialogComponent);

    dialogRef.afterClosed().subscribe(inputNumber => {
      if (inputNumber) {
        // 用路由参数传递数字到编辑页
        this.router.navigate(['/edit-form', inputNumber]);
      }
    });
  }
}

3. 编辑表单组件获取参数并调用API
   在编辑组件中，通过ActivatedRoute拿到路由参数，再调用API获取数据填充表单：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DataApiService } from '../services/data-api.service';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-edit-form',
  templateUrl: './edit-form.component.html'
})
export class EditFormComponent implements OnInit {
  editForm: FormGroup;

  constructor(
    private route: ActivatedRoute,
    private apiService: DataApiService,
    private fb: FormBuilder
  ) {
    this.editForm = this.fb.group({
      // 定义你的表单控件
      name: [''],
      value: ['']
    });
  }

  ngOnInit() {
    const numberParam = this.route.snapshot.paramMap.get('inputNumber');
    if (numberParam) {
      const inputNum = parseInt(numberParam, 10);
      this.apiService.fetchDataByNumber(inputNum).subscribe(response => {
        // 用API响应填充表单
        this.editForm.patchValue(response);
      });
    }
  }
}

如果希望把API调用逻辑放在Dialog里，直接把响应结果传给编辑组件，可以这么做：

1. Dialog中调用API并返回响应对象
   修改Dialog的搜索方法，先调用API拿到结果，再关闭Dialog返回响应：

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { DataApiService } from '../services/data-api.service';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-search-dialog',
  templateUrl: './search-dialog.component.html'
})
export class SearchDialogComponent {
  userInputNumber: number;

  constructor(
    public dialogRef: MatDialogRef<SearchDialogComponent>,
    private apiService: DataApiService,
    private snackBar: MatSnackBar
  ) {}

  onSearchClick() {
    if (!isNaN(this.userInputNumber) && this.userInputNumber > 0) {
      this.apiService.fetchDataByNumber(this.userInputNumber).subscribe({
        next: (response) => {
          this.dialogRef.close(response);
        },
        error: () => {
          this.snackBar.open('未找到对应数据', '关闭', { duration: 3000 });
        }
      });
    }
  }
}

2. 调用方接收响应并传递到编辑组件
   这里推荐用路由的state来传递对象（比路由参数更适合复杂数据）：

openSearchModal() {
  const dialogRef = this.dialog.open(SearchDialogComponent);

  dialogRef.afterClosed().subscribe(apiResponse => {
    if (apiResponse) {
      this.router.navigate(['/edit-form'], {
        state: { formData: apiResponse }
      });
    }
  });
}

3. 编辑组件获取响应数据填充表单
   在编辑组件中通过Router拿到路由state里的数据：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-edit-form',
  templateUrl: './edit-form.component.html'
})
export class EditFormComponent implements OnInit {
  editForm: FormGroup;

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

  ngOnInit() {
    const navigation = this.router.getCurrentNavigation();
    if (navigation?.extras.state) {
      const formData = navigation.extras.state['formData'];
      this.editForm.patchValue(formData);
    }
  }
}

额外小提示 #

如果是大型应用，组件之间层级复杂，推荐用共享服务+RxJS Subject来传递数据，这样组件耦合度更低。比如创建一个DataShareService，在Dialog里把API响应next到Subject，编辑组件订阅这个Subject就能拿到数据。

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