Angular 10/Ionic 5-将输入数据从模态传递到父组件，然后提交给firebase数据库

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-parent',
  template: `
    <button (click)="openModal()">打开模态框</button>
    <div *ngIf="dataFromModal">
      <h3>从模态框获取的数据：</h3>
      <p>{{ dataFromModal | json }}</p>
      <button (click)="submitData()">提交到Firebase</button>
    </div>
  `
})
export class ParentComponent {
  dataFromModal: any;

  constructor(private modalController: ModalController) {}

  async openModal() {
    const modal = await this.modalController.create({
      component: ModalComponent
    });

    modal.onDidDismiss().then((result) => {
      if (result.data) {
        this.dataFromModal = result.data;
      }
    });

    return await modal.present();
  }

  submitData() {
    // 提交数据到Firebase
    // 使用this.dataFromModal中的数据
  }
}

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { AngularFireDatabase } from '@angular/fire/database';

@Component({
  selector: 'app-modal',
  template: `
    <form (ngSubmit)="submitForm()">
      <input type="text" [(ngModel)]="inputData" name="inputData" required>
      <button type="submit">提交</button>
    </form>
  `
})
export class ModalComponent {
  inputData: string;

  constructor(private modalController: ModalController, private db: AngularFireDatabase) {}

  submitForm() {
    // 关闭模态框并将数据传递给父组件
    this.modalController.dismiss(this.inputData);
    
    // 将数据存储到Firebase
    this.db.list('data').push(this.inputData);
  }
}