如何从不包含 Angular 14 中的 function 的模态组件触发 function？

Question

我一直在用 Angular 14 开发电子商务应用程序。

我目前正在处理一个表格，*只能在接受模式中显示的“条款和条件”后提交。

FormComponent和ModalComponent是兄弟组件。

在form.component.ts我有：

import { Component } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { FormGroup, FormControl } from '@angular/forms';
import { ModalComponent } from '../modal/modal.component';

@Component({
  selector: 'my-app',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent {
  public form: FormGroup = new FormGroup({});

  constructor(private dialog: MatDialog) {}

  ngOnInit() {
    this.form = new FormGroup({
      first_name: new FormControl(''),
      last_name: new FormControl(''),
      phone: new FormControl(''),
      email: new FormControl(''),
    });
  }

  public openDialog() {
    const dialogConfig = new MatDialogConfig();

    // Dialog options
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.width = '420px';

    this.dialog.open(ModalComponent, dialogConfig);
  }

  public sendFormData() {
    console.log(this.form);
  }
}

在表单组件的模板中：

<h1>Get in touch</h1>

<form [formGroup]="form">
  <div class="form-grid">
    <mat-form-field appearance="outline" floatLabel="never">
      <mat-label class="mat-label">Fast name:</mat-label>
      <input class="mat-input" matInput formControlName="first_name" />
    </mat-form-field>

    <mat-form-field appearance="outline" floatLabel="always">
      <mat-label class="mat-label">Last name:</mat-label>
      <input class="mat-input" matInput formControlName="last_name" />
    </mat-form-field>

    <mat-form-field appearance="outline" floatLabel="never">
      <mat-label class="mat-label">Phone:</mat-label>
      <input class="mat-input" matInput formControlName="phone" />
    </mat-form-field>

    <mat-form-field appearance="outline" floatLabel="never">
      <mat-label class="mat-label">Email:</mat-label>
      <input class="mat-input" matInput formControlName="email" />
    </mat-form-field>
  </div>
  <div class="center">
    <button (click)="openDialog()" mat-raised-button color="primary">
      Submit
    </button>
  </div>
</form>

在modal.component.ts我有：

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

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css'],
})
export class ModalComponent implements OnInit {
  constructor(private dialogRef: MatDialogRef<ModalComponent>) {}

  ngOnInit(): void {}

  accept() {
    console.log('Terms accepted!');
  }

  reject() {
    this.dialogRef.close();
  }
}

在modal.component.html我有：

<div mat-dialog-title>
  <h2>Terms & Conditions</h2>
</div>
<div mat-dialog-content>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur expedita
    ipsam assumenda sed non aut possimus, dolores ullam voluptates voluptatum
    distinctio aspernatur neque velit eum, eveniet voluptas omnis. Veritatis,
    architecto?
  </p>
  
</div>
<mat-dialog-actions>
  <button mat-raised-button color="primary" (click)="reject()">Reject</button>
  <button mat-raised-button color="primary" (click)="accept()">Accept</button>
</mat-dialog-actions>

我已将所有内容放在THIS Stackblitz 中。

目标

目标是从模态组件的accept() function 内部触发表单组件的 function sendFormData() ？

为了实现这一目标，我做了：

accept() {
    console.log('Terms accepted!');
    this.FormComponent.sendFormData();
}

以上不起作用。

达到预期结果的最简单和最可靠的方法是什么？

Answer 1

在您的对话框组件中，您将结果传递给close() function：

accept() {
  this.dialogRef.close('ACCEPTED');
}

reject() {
  this.dialogRef.close('REJECTED');
}

在您的表单组件的openDialog() function 中，您处理结果：

public openDialog() {
  const dialogConfig = new MatDialogConfig();
  dialogConfig.disableClose = true;
  dialogConfig.autoFocus = true;
  dialogConfig.width = '420px';

  const dialogRef = this.dialog.open(ModalComponent, dialogConfig);
  dialogRef.afterClosed().subscribe((result) => {
    if (result === 'ACCEPTED') {
      this.sendFormData();
    }
  });
}