Ionic中如何复用模态框实现列表项数据传递？

问题根源 #

当前实现存在两个核心问题：

• 循环生成的按钮共用同一个id="open-modal"，DOM中id必须唯一，导致模态框触发逻辑混乱
• 使用trigger属性自动打开模态框时，模态框会在getItem(item)完成赋值前就渲染，无法获取当前点击项的数据

第一步：修改模板文件（list-details.component.html） #

移除重复id和自动触发属性，改为手动控制模态框打开，并调整模态框内容展示选中项数据：

<ion-list>
  <ng-container *ngFor="let item of myList">
    <ion-item detail="true">
      <ion-button expand="block" (click)="openItemModal(item)">
        <ion-label>
          <h2 class="headline">{{item.beer}}</h2>
          <h3 class="sub-headline">{{item.name}}</h3>
          <p>{{item.notes}}</p>
          <p>{{item.price | currency}}</p>
          <app-rating [rating]="item.rating"></app-rating>
        </ion-label>
      </ion-button>
    </ion-item>
  </ng-container>
</ion-list>

<ion-modal (willDismiss)="onWillDismiss($event)">
  <ng-template>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-button (click)="cancel()">Cancel</ion-button>
        </ion-buttons>
        <ion-title>{{user?.name}}</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="confirm()" [strong]="true">Confirm</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <!-- 展示选中项的详细数据 -->
      <ion-item>
        <ion-label>啤酒名称</ion-label>
        <ion-text>{{user?.beer}}</ion-text>
      </ion-item>
      <ion-item>
        <ion-label>备注</ion-label>
        <ion-text>{{user?.notes}}</ion-text>
      </ion-item>
      <ion-item>
        <ion-label>价格</ion-label>
        <ion-text>{{user?.price | currency}}</ion-text>
      </ion-item>
      <app-rating [rating]="user?.rating"></app-rating>
      
      <!-- 保留原有输入框 -->
      <ion-item>
        <ion-label position="stacked">Enter your name</ion-label>
        <ion-input type="text" placeholder="Your name" [(ngModel)]="name"></ion-input>
      </ion-item>
    </ion-content>
  </ng-template>
</ion-modal>

第二步：修改组件逻辑（list-details.component.ts） #

新增手动打开模态框的方法，确保先完成选中项赋值再渲染模态框：

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonModal, OverlayEventDetail } from '@ionic/angular';

export class ListDetailsComponent implements OnInit {
  @ViewChild(IonModal) modal: IonModal;
  
  message = 'This modal example uses triggers to automatically open a modal when the button is clicked.';
  name: string;
  user: any;

  constructor() { }

  ngOnInit() {
  }

  // 赋值并手动打开模态框
  openItemModal(item: any){
    this.user = item;
    this.modal.present();
  }

  cancel() {
    this.modal.dismiss(null, 'cancel');
  }

  confirm() {
    this.modal.dismiss(this.name, 'confirm');
  }

  onWillDismiss(event: Event) {
    const ev = event as CustomEvent<OverlayEventDetail<string>>;
    if (ev.detail.role === 'confirm') {
      this.message = `Hello, ${ev.detail.data}!`;
    }
  }
}

关键说明 #

• 手动控制模态框打开时机，确保user赋值完成后再渲染模态框，保证数据正确展示
• 移除重复id属性，避免DOM冲突
• 使用user?.property可选链语法，防止模态框初始化时因user为空导致的报错

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