angular 在子组件中如何触发父组件的方法

Question

现在需求是这样的
封装了一个modal弹窗
希望弹窗关闭的时候执行父组件的刷新列表的方法

子组件

<nz-modal [nzStyle]="{ top: '100px'}" nzWidth="900px" *ngIf="isDispatchedVisible" nzWrapClassName="vertical-center-modal" [(nzVisible)]="isDispatchedVisible" [nzTitle]="tplTitle" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOkDispatched()">
  <ng-template #tplTitle>
    <span>维修单号:{{repairInfo?.repair.repair_no}}</span>
  </ng-template>
  <div nz-row>
    <div nz-col nzSpan="10">
      <p>报修单位: {{repairInfo.repair.customer_name}}</p>
      <p>房间号: {{repairInfo.repair.room_no}}</p>
      <p>报修人: {{repairInfo.repair.repair_person}}</p>
      <p>联系方式: {{repairInfo.repair.repair_phone}}</p>
    </div>
    <div nz-col nzSpan="10">
      <p>报修时间: {{repairInfo.repair.repair_time}}</p>
      <p>预约维修时间: {{repairInfo.repair.repair_order_time}}</p>
      <p>报修项目: {{repairInfo.repair.project_name}}</p>
    </div>
  </div>
  <p *ngIf="repairInfo.repair.repair_cost_type==2">维修费: 免费</p>
  <p *ngIf="repairInfo.repair.repair_cost_type==1">维修费: {{repairInfo.repair.repair_cost_price}}</p>
  <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)">
  <p>是否立即打印派工单?</p>
</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
  ) { }

}

父组件

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

想在子组件点击确定也就是执行handleOkDispatched()的时候父组件执行this.setTasks();

请问应该怎么写

Answer 1

使用事件机制就好了
可参考官方https://angular.io/guide/comp...