如何获取对话框返回的对话框的响应数据，对话框在Angular中关闭了父组件内部。

Question

我创建了将数据传递到对话框的接口，以充当可重复使用的组件。

CompanyNews-interfaces.ts

export interface ConfirmDialogData {
    title: string;
    description: string;
    imageSrc: string;
    showText: boolean;
    modalFormData: any;
}

我正在调用对话框的父组件中的以上接口，以打开

Create-news.component.ts-父组件 -

  openDialog(){
    this.companyNewsDialogServiceService.confirmDialog({
      title: 'CardImage',
      description: 'Card Image Description',
      imageSrc: "",
      modalFormData: "",
      showText: false
    });
  }

    openPersonDialog(){
    this.companyNewsDialogServiceService.confirmDialog({
      title: 'Responsible Person Image',
      description: 'Responsible Person Image Description',
      imageSrc: "",
      modalFormData: "",
      showText: true
    }); 
  }

  openAssetDialog(){
    this.companyNewsDialogServiceService.confirmDialog({
      title: 'Assets Image',
      description: 'Assets Image Description',
      imageSrc: "",
      modalFormData: "",
      showText: true
    }); 
  }

上述函数inter inter convernalDialog函数在company-news-dialog-service.service.service.service中定义。 TS传递在create-news.component.ts中定义的接口数据

以下各自对话框的ts是公司news-dialog-service.service.service.ts文件

company company news-dialog-service.service.service.service.ts

@Injectable({
  providedIn: 'root'
})
export class CompanyNewsDialogServiceService {
  recivedFormData: any;
  constructor(private dialog : MatDialog) { }
  confirmDialog(data: ConfirmDialogData) {
    debugger
    return this.dialog.open(UploadFileDialogComponent, {data}).afterClosed().subscribe(res =>{
      this.recivedFormData = res;
      console.log('formdata',this.recivedFormData)
    });
  }
}

在上述代码中I''' m从我的对话框组件（upload-file.component）获取对话框关闭后。

以下是dialog-boxt（upload-file.component）组件代码

upload-file.component.ts-

import { Component, ElementRef, EventEmitter, Inject, OnInit, Output, VERSION, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FileUploadService } from 'projects/shared-lib/src/lib/file-upload.service';
import { ConfirmDialogData } from 'projects/shared-lib/src/lib/shared-interfaces/companynews-interfaces';
// import { ConfirmDialogData } from 'projects/shared-lib/src/lib/shared-interfaces/pagination-interfaces';

@Component({
  selector: 'app-upload-file-dialog',
  templateUrl: './upload-file-dialog.component.html',
  styleUrls: ['./upload-file-dialog.component.scss']
})

export class UploadFileDialogComponent implements OnInit {
  fileType: boolean;
  linkType: boolean;
  file: any;
  fileUploadPending = true;
  message: string;
  modalFormData: any;
  imagePath: any;
  dataimage: any;
  show: boolean = true;
  uploadedImagePath: string;
  allLanguages: string[] = ['en', 'de', 'fr', 'ar', 'zh'];
  selectedForm: FormGroup;
  selectedLanguage: string = 'en';
  @ViewChild('fileInput') fileInput: ElementRef;
  fileAttr = 'Choose File';
  constructor(private matdialogref: MatDialogRef<UploadFileDialogComponent>, private fb: FormBuilder, @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData, private fileUploadService: FileUploadService) {
   this.setForm()
  }

  ngOnInit(): void {
    console.log(this.matdialogref)
  }
  setForm(){
    this.selectedForm = this.fb.group({
      text: [''],
      link: [''],
      language: [this.selectedLanguage],
      filepath: [this.uploadedImagePath]
    })
    console.log("57", this.selectedForm)
  }
  get getLink(){
    return this.selectedForm.get('link')?.value == ""
  }
  onClickFile() {
    this.fileType = true;
    this.linkType = false
  }
  onClickLink() {
    this.fileType = false;
    this.linkType = true
  }
  onClose() {
    this.matdialogref.close()
  }
  onItemChange(value : any){
    console.log(value);
    let val = value.target.id;
    console.log(" Value is : ", val );
    if(val === "en"){  
    }
  }
  uploadFile() {
    debugger
    this.fileUploadService.UploadFile(this.file).subscribe((res: any) =>{
      console.log("83",res)
      console.log("83",res.data)
      console.log("83",res.data.uploadedFilePath)
      this.uploadedImagePath = res.data.uplodedFilePath
      this.setForm()
      this.modalFormData = this.selectedForm.value
      console.log("modal",this.modalFormData)
      this.matdialogref.close({data: this.modalFormData})
    })
  }
  removeOnClick() {
    this.show = !this.show;
    this.fileAttr = ''
  }
  uploadFileEvt(imgFile: any) {
    this.file = imgFile.target.files[0];
    console.log(this.file)
    if (imgFile.target.files && imgFile.target.files[0]) {
      this.fileAttr = '';
      Array.from(imgFile.target.files).forEach((file: any) => {
        this.fileAttr += file.name + ' - ';
      });

      // HTML5 FileReader API
      let reader = new FileReader();
      reader.onload = (e: any) => {
        let image = new Image();
        image.src = e.target.result;
        const [file] = imgFile.target.files;
        image.onload = rs => {
          let imgBase64Path = e.target.result;
          // console.log(imgBase64Path);
          this.data.imageSrc = imgBase64Path;
          console.log(this.data.imageSrc)
        };
      };
      reader.readAsDataURL(imgFile.target.files[0]);

      // Reset if duplicate image uploaded again
      this.fileInput.nativeElement.value = "";
      this.show = false
    } else {
      this.fileAttr = 'Choose File';
    }
  }
  getAssetType(){

  }
  selectLanguage(language : any){
    this.selectedLanguage = language;
    console.log(this.selectedLanguage)
  }
}

上述代码中的子组件uploadfile（）函数，我通过输入字段收集的FormValues，还返回了FilePath通过上传文件端点 - （文本，链接，语言，filepath）作为模拟码框关闭后的modalformdata。

我正在收到此数据 公司news-dialog-service.service.ts服务文件作为响应，如下屏幕截图所示。

我需要从Create-News.component.ts中的Company-News-Dialog-Service.service.ts返回的响应数据。

Answer 1

由于您的CompanyNewSdialogServiceservice已经订阅了正在关闭的对话框，因此您需要在该服务上创建一个新的“可订阅”属性，以便任何称为corce> cornectiondialog的组件方法可以在可用时获取该数据，

export class CompanyNewsDialogService {
  recivedFormData: any;
  
  dataReceived: Subject = new Subject()  ; // create a new Subject
  
  constructor(private dialog : MatDialog) { }
  
  confirmDialog(data: ConfirmDialogData) {
    debugger
    return this.dialog.open(UploadFileDialogComponent, {data}).afterClosed().subscribe(res =>{
      this.recivedFormData = res;
      dataReceived.next(res) ; //to notifiy the subscribed parent/component 
    });
  }
}

然后当您打开对话框时订阅该数据对象时。

openDialog(){
    //subscribe to the subject of the service 
    this.companyNewsDialogService.dataReceived.subscribe(data => console.log(data))

    this.companyNewsDialogService.confirmDialog({
      title: 'CardImage',
      description: 'Card Image Description',
      imageSrc: "",
      modalFormData: "",
      showText: false
    });
}

还要考虑将您的服务从CompanyNewSdialogServiceservice重命名为 CompanyNewSdialogService

有关更多详细信息
/a>