Angular 11中点击模态框提交按钮后如何更新父组件列表

你当前的逻辑存在几个核心问题，导致列表无法自动更新：

• 保存按钮直接绑定了模态框关闭事件，接口提交请求还未返回就关闭了弹窗，父组件无法感知操作是否完成
• 父组件打开模态框后没有监听弹窗关闭的回调事件，操作完成后没有触发列表刷新逻辑
• 额外逻辑缺陷：ngOnInit中路由参数是异步获取的，你在参数订阅外直接调用列表接口，首次加载时会因为参数未定义导致请求异常

1. 调整编辑模态框逻辑 #

首先修改编辑模态框的component.ts，注入ModalController，等接口提交成功后再关闭弹窗，同时传递操作成功的标识：

// 新增导入
import { ModalController } from '@ionic/angular';

// 构造函数注入
constructor(
  private configClientService: MapSettingsClientServiceService,
  private modalCtrl: ModalController
) {}

// 修改提交方法
onSubmit(data: {id: number; indexNummer: number; indexName: string; indexWert: number; maxVal: number; minVal: number}) {
  data.id= this.id;
  this.stringifiedData = JSON.stringify(data);
  this.configClientService.putAnalyticIndiceById(this.id,this.stringifiedData).subscribe((result)=>{
    // 接口提交成功后关闭弹窗，传递更新成功标识
    this.modalCtrl.dismiss({updated: true});
  });
}

// 新增取消关闭方法
close() {
  this.modalCtrl.dismiss({updated: false});
}

然后修改模态框的html模板，去掉保存按钮上直接关闭弹窗的点击事件，取消按钮绑定新增的close方法：

<!-- 保存按钮去掉(click)="modal.dismiss()" -->
<ion-button type="submit" expand="block">Save</ion-button>
<!-- 取消按钮绑定close方法 -->
<ion-button expand="block" color="danger" (click)="close()">Cancel</ion-button>

2. 给新增模态框加相同逻辑 #

你用来新增数据的ModalAnalyticIndicesPostComponent也要做上述相同调整：

• 注入ModalController
• 新增接口提交成功后，调用this.modalCtrl.dismiss({updated: true})关闭弹窗
• 模板上不要给提交按钮绑定提前关闭的事件，避免请求被打断

3. 修改父组件的弹窗打开逻辑 #

父组件中打开编辑、新增弹窗的方法，增加模态框关闭事件监听，检测到操作成功后调用已有的getNewData()方法刷新列表：

// 修改编辑弹窗方法
async openModal(value: any) {
  console.log('open modal');
  const modal = await this.modalCtrl.create({
    component: ModalAnalyticIndicesComponent,
    componentProps: {
      id: value.id,
      indexNummer: value.indexNummer,
      indexName: value.indexName,
      minVal: value.minVal,
      maxVal: value.maxVal,
      indexWert: value.indexWert
    }
  });
  await modal.present();
  // 监听弹窗关闭
  const { data } = await modal.onDidDismiss();
  // 操作成功则刷新列表
  if (data?.updated) {
    this.getNewData();
  }
}

// 修改新增弹窗方法
async openModalPost() {
  console.log('open modal');
  const modal = await this.modalCtrl.create({
    component: ModalAnalyticIndicesPostComponent,
  });
  await modal.present();
  // 监听弹窗关闭
  const { data } = await modal.onDidDismiss();
  if (data?.updated) {
    this.getNewData();
  }
}

4. 修复初始化加载的参数问题 #

把ngOnInit里的列表请求挪到路由参数订阅回调内，避免首次加载参数未定义：

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.indexNummer = parseInt(params.get('indexNummer'), 10);
    this.indexName = params.get('indexName');
    // 拿到路由参数后再拉取列表数据
    this.getNewData();
  });
}

改完之后，不管是新增还是编辑数据，接口提交成功后才会关闭弹窗，父组件收到成功信号就会自动拉取最新列表数据，不需要手动刷新页面。

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