Angular中如何在父组件获取服务返回的对话框关闭后的响应数据

Hey, it looks like you’ve got a solid reusable dialog setup with your interface, but you’re stuck on getting the parent component to access the data sent back from the child dialog. Let’s fix this step by step:

1. Adjust the Dialog Service to Return an Observable #

Right now, your service is subscribing to afterClosed() internally, which locks the response data inside the service—so the parent component never gets a chance to access it. Instead, we’ll modify the service to return the observable directly, letting the parent handle the subscription.

Update your company-news-dialog-service.service.ts:

@Injectable({
  providedIn: 'root'
})
export class CompanyNewsDialogServiceService {
  // You can remove the `recivedFormData` variable since we won’t use it here anymore
  constructor(private dialog : MatDialog) { }

  confirmDialog(data: ConfirmDialogData): Observable<any> {
    // Return the afterClosed() observable instead of subscribing internally
    return this.dialog.open(UploadFileDialogComponent, {data}).afterClosed();
  }
}

2. Subscribe to the Observable in Parent Component Methods #

Now, in each of your parent component’s dialog-opening methods, you can subscribe to the observable returned by the service. This lets you capture the data sent back when the dialog closes.

Update your create-news.component.ts methods:

openDialog(){
  this.companyNewsDialogServiceService.confirmDialog({
    title: 'CardImage',
    description: 'Card Image Description',
    imageSrc: "",
    modalFormData: "",
    showText: false
  }).subscribe(res => {
    // Here’s your dialog response data!
    console.log('Card Image Dialog Data:', res);
    // Handle the data as needed (e.g., save to parent component variables)
    // this.cardImageData = res?.data;
  });
}

openPersonDialog(){
  this.companyNewsDialogServiceService.confirmDialog({
    title: 'Responsible Person Image',
    description: 'Responsible Person Image Description',
    imageSrc: "",
    modalFormData: "",
    showText: true
  }).subscribe(res => {
    console.log('Responsible Person Dialog Data:', res);
    // this.personData = res?.data;
  });
}

openAssetDialog(){
  this.companyNewsDialogServiceService.confirmDialog({
    title: 'Assets Image',
    description: 'Assets Image Description',
    imageSrc: "",
    modalFormData: "",
    showText: true
  }).subscribe(res => {
    console.log('Assets Dialog Data:', res);
    // this.assetData = res?.data;
  });
}

3. Quick Typo Fix in Child Component #

I spotted a small typo in your upload-file.component.ts that might break the image path capture:

// Wrong: uplodedFilePath (missing an 'o')
this.uploadedImagePath = res.data.uplodedFilePath;
// Correct: uploadedFilePath
this.uploadedImagePath = res.data.uploadedFilePath;

Fix this to ensure your uploaded image path is stored correctly.

Why This Works #

By returning the afterClosed() observable from the service, we’re shifting control of the response data to the parent component. This keeps the service focused on its job (opening dialogs) while letting the parent decide how to use the returned data—ideal for component reuse, since different parent components might handle the data in unique ways!

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