now the demand is like this.
encapsulates a modal pop-up window
method to refresh the list of parent components when you want the pop-up window to close

subcomponents

<nz-modal [nzStyle]="{ top: "100px"}" nzWidth="900px" *ngIf="isDispatchedVisible" nzWrapClassName="vertical-center-modal" [(nzVisible)]="isDispatchedVisible" [nzTitle]="tplTitle" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOkDispatched()">
  <ng-template -sharptplTitle>
    <span>:{{repairInfo?.repair.repair_no}}</span>
  </ng-template>
  <div nz-row>
    <div nz-col nzSpan="10">
      
: {{repairInfo.repair.customer_name}}
      
: {{repairInfo.repair.room_no}}
      
: {{repairInfo.repair.repair_person}}
      
: {{repairInfo.repair.repair_phone}}
    </div>
    <div nz-col nzSpan="10">
      
: {{repairInfo.repair.repair_time}}
      
: {{repairInfo.repair.repair_order_time}}
      
: {{repairInfo.repair.project_name}}
    </div>
  </div>
  <p *ngIf="repairInfo.repair.repair_cost_type==2">: 

  <p *ngIf="repairInfo.repair.repair_cost_type==1">: {{repairInfo.repair.repair_cost_price}}

  <nz-divider></nz-divider>
  <form nz-form [formGroup]="dispatch" (ngSubmit)="onSubmit()">
    <nz-form-item>
      <nz-form-label nzRequired nzSpan="4"></nz-form-label>
      <nz-form-control nzSpan="16">
        <input nz-input formControlName="mechanicName" placeholder="" />
        <!-- <nz-select formControlName="mechanicId" nzAllowClear nzShowSearch (nzOnSearch)="onSearchDispatchUser($event)">
          <nz-option *ngFor="let item of dispatchUserList" [nzValue]="item.user_id" [nzLabel]="item.user_name"></nz-option>
        </nz-select> -->
        <nz-form-explain *ngIf="isInvalidDispatch("mechanicName")"></nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired nzSpan="4"></nz-form-label>
      <nz-form-control nzSpan="16">
        <nz-date-picker nzShowTime nzFormat="yyyy/MM/dd HH:mm:ss" formControlName="repairOrderTime"></nz-date-picker>
        <nz-form-explain *ngIf="isInvalidDispatch("repairOrderTime")"></nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
  <form nz-form [formGroup]="material" (ngSubmit)="onSubmit()">
    <nz-form-item *ngFor="let control of materialArray;let i = index">
      <nz-form-label nzSpan="4" *ngIf="i==0" [nzFor]="control.records_name"></nz-form-label>
      <nz-form-control nzSpan="11" [nzOffset]="i==0?0:4">
        <input nz-input [formControlName]="control.records_name" [attr.id]="control.id" placeholder="" />
        <nz-form-explain *ngIf="getFormControl(control.records_name)?.dirty&&getFormControl(control.records_name)?.hasError("required")"></nz-form-explain>
      </nz-form-control>
      <nz-form-control nzSpan="8" [nzOffset]="1">
        <nz-input-number nz-input [formControlName]="control.records_num" [attr.id]="control.id" [nzPlaceHolder]="""" [nzMin]="1" [nzStep]="1"></nz-input-number>
        <i *ngIf="i!=0" nz-icon style="font-size:24px;  top: 4px;custor:pointer;position:relative;left: 5px;" type="minus-circle-o" theme="outline" class="anticon anticon-minus-circle dynamic-delete-button" (click)="removeField(control,$event)"></i>
        <nz-form-explain *ngIf="getFormControl(control.records_num)?.dirty&&getFormControl(control.records_num)?.hasError("required")"></nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control [nzXs]="{span:24,offset:0}" [nzSm]="{span:16,offset:4}">
        <button nz-button nzType="dashed" style="width:100%" (click)="addField($event)"><i nz-icon type="plus"></i></button>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>

<!--  -->
<nz-modal [(nzVisible)]="isDownloadVisible" nzTitle="" (nzOnCancel)="handleCancel()" (nzOnOk)="download(repairInfo)">
  
?
</nz-modal>


import {
  AbstractControl,
  FormBuilder,
  FormControl,
  FormGroup,
  Validators
} from "@angular/forms";
import { ApiService } from "@/services/api.service";
import { UtilService } from "@/services/util.service";
import { NzMessageService } from "ng-zorro-antd";
import { Globals } from "@/services/globals.service";
import { Component, ElementRef, Input, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "dispatch",
  templateUrl: "./dispatch.html",
})
export class DispatchComponent {
  @Input()
  set option(option) {
    console.log(option)
    this.id = option.id;
    this.module_id = option.module_id;
    this.isDispatchedVisible = true;
    this.getData(this.id)
  }



  id = null;
  module_id = null;

  material = this.form.group({});

  dispatch = this.form.group({
    mechanicName: [null, [Validators.required]],
    repairOrderTime: [null, [Validators.required]]
  })

  repairInfo = null;
  isDispatchedVisible = true;
  isDownloadVisible = false;
  isInvalidDispatch = this.util.isInvalid(this.dispatch);

  async getData(id) {
    const { data } = await this.api.get(`service-records/${id}`)({
    })
    this.repairInfo = data;
    this.isDispatchedVisible = true;
  }

  async handleOkDispatched() {
    console.log(this.dispatch.value)
    await this.api.put("service-records/assignuser")({
      s_records_id: this.id,
      s_mechanic: this.dispatch.value.mechanicName,
      repair_order_time: +this.dispatch.value.repairOrderTime,
      materi_data: Array.from({ length: this.materialArray.length }).map((v, i) => ({
        records_name: this.material.value[`records_name${i}`],
        records_num: this.material.value[`records_num${i}`],
        insert: 1,
      })),
    }).then(() => {
      this.message.create("success", "")
      this.dispatch.reset();
      this.material = this.form.group({})
      this.materialArray = [];
      this.handle.emit(true);
    });
    this.isDispatchedVisible = false;
    this.isDownloadVisible = true;
  }

  handleCancel(): void {
    this.isDispatchedVisible = false;
    this.isDownloadVisible = false;
    this.dispatch.reset();
    this.material = this.form.group({})
    this.materialArray = [];
  }

  async download(item) {
    this.isDownloadVisible = false;
    window.location.href = `${this.globals.baseUrl}file/download?module_id=${this.module_id}&&data_id=${this.id}`;
  }


  materialArray: Array<{ id: number, records_name: string, records_num: string }> = [];

  addField(e?: MouseEvent): void {
    if (e) {
      e.preventDefault();
    }
    const id = (this.materialArray.length > 0) ? this.materialArray[this.materialArray.length - 1].id + 1 : 0;

    const control = {
      id,
      records_name: `records_name${id}`,
      records_num: `records_num${id}`
    };
    const index = this.materialArray.push(control);
    this.material.addControl(this.materialArray[index - 1].records_name, new FormControl(null));
    this.material.addControl(this.materialArray[index - 1].records_num, new FormControl(null));
  }

  removeField(i: { id: number, records_name: string, records_num: string }, e: MouseEvent): void {
    e.preventDefault();
    if (this.materialArray.length > 1) {
      const index = this.materialArray.indexOf(i);
      this.materialArray.splice(index, 1);
      this.material.removeControl(i.records_name);
      this.material.removeControl(i.records_num);
    }
  }

  getFormControl(name: string): AbstractControl {
    return this.material.controls[name];
  }

  constructor(
    private api: ApiService,
    private util: UtilService,
    private globals: Globals,
    private form: FormBuilder,
    private message: NzMessageService
  ) { }

}

parent component

<dispatch  *ngIf="isDispatch" [option]="optionData"></dispatch>

I want the parent component to execute the this.setTasks (); when the child component clicks to confirm that the handleOkDispatched () is executed.

how should I write