如何在Angular弹窗组件中调用父组件Company的函数？

方案一：父组件订阅弹窗关闭事件（推荐） #

Angular Material Dialog的afterClosed()方法可以监听弹窗关闭后的返回值，你可以在父组件Company里通过这个方法，在弹窗上传成功并关闭时调用目标函数。

修改父组件Company的TS代码： #

public openUploadDocumentDialog(): void {
  const dialogRef = this.dialog.open(UploadDocumentDialogComponent, {
    width: '50vw',
    panelClass: ['documentsUploadDialog', 'ceqUserDialog'],
    data: {
      companyid: this.route.snapshot.params['company_guid']
    }
  });

  // 订阅弹窗关闭事件，拿到返回值后调用父组件函数
  dialogRef.afterClosed().subscribe(result => {
    if (result) { // 仅当上传成功、弹窗返回有效数据时执行
      this.targetParentFunction(); // 替换成你需要调用的父组件函数名
    }
  });
}

// 示例：父组件中需要被触发的函数
private targetParentFunction(): void {
  // 这里写你的业务逻辑，比如刷新文档列表、更新组件数据等
  console.log('父组件函数已执行');
}

弹窗组件代码无需额外修改 #

你当前的弹窗代码已经在上传成功后调用this.dialogRef.close(event.data)，这会把event.data作为返回值传给父组件的afterClosed()订阅，父组件拿到结果后即可执行自身函数。

方案二：共享服务实现组件通信（适用于复杂场景） #

如果需要弹窗在上传过程中就通知父组件（而非等到关闭后），可以用共享服务实现跨组件通信。

1. 创建共享服务 #

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DialogCommService {
  private uploadSuccess$ = new Subject<any>();
  uploadSuccessNotification = this.uploadSuccess$.asObservable();

  sendUploadSuccess(data: any): void {
    this.uploadSuccess$.next(data);
  }
}

2. 父组件订阅服务事件 #

import { DialogCommService } from './dialog-comm.service';
import { Subscription } from 'rxjs';

export class CompanyComponent implements OnInit, OnDestroy {
  private uploadSub: Subscription;

  constructor(
    private dialog: MatDialog,
    private route: ActivatedRoute,
    private dialogCommService: DialogCommService
  ) {}

  ngOnInit(): void {
    // 订阅上传成功的通知
    this.uploadSub = this.dialogCommService.uploadSuccessNotification.subscribe(data => {
      this.targetParentFunction();
    });
  }

  ngOnDestroy(): void {
    // 销毁订阅避免内存泄漏
    this.uploadSub?.unsubscribe();
  }

  // 其他代码...
}

3. 弹窗组件调用服务发送通知 #

import { DialogCommService } from './dialog-comm.service';

export class UploadDocumentDialogComponent {
  constructor(
    private apiService: ApiService,
    private snackBar: MatSnackBar,
    private dialogRef: MatDialogRef<UploadDocumentDialogComponent>,
    private dialogCommService: DialogCommService
  ) {}

  public uploadFileHandler(): void {
    this.apiService.uploadDocumentFile(this.uploadedFile)
      .subscribe({
        next: (event) => {
          if (event.data) {
            // 通知父组件上传成功
            this.dialogCommService.sendUploadSuccess(event.data);
            this.dialogRef.close(event.data);
          }
        },
        error: (err) => {
          this.snackBar.open('Connect error! Please try again!', 'Ok', {
            duration: 2000,
          });
        },
      });
  }
}

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