javascript - 如何从其他组件中的 Mat Angular 对话框获取数据？

Question

所以我有一个组件:DetailComponent:

export class DetailComponent implements OnInit  {


  @Input() participant: ParticipantInfoDTO;

  constructor(private dialog: MatDialog, route: ActivatedRoute) {
    this.participant = route.snapshot.data['participant'];
  }

  ngOnInit() {}




  openEcheqSelectorDialog() {
    this.dialog.open(EcheqSelectorComponent, {
      width: '600px',
      maxHeight: 'calc(100vh - 2em)',
      data: {
        participant: console.log('participantIDTest', this.participant)
      }
    });
  }
}

来自 this.participant 的数据如下:

{participantId: "ac3d1836-2e36-4947-a62f-04cd00425bcc", email: "k@endrix.org", gender: "Male", fullName: "k kaas", firstName: "k", …}

这样我就得到了正确的数据。

但现在我想在其他组件中也接收相同的数据。另一个组件如下所示:

export class EcheqSelectorComponent implements OnInit, OnDestroy {
  private subscriptions = new Subscription();
  echeqs: EcheqFamilyInfo[] = [];
  allEcheqs: EcheqFamilyInfo[] = [];
  echeqFamily: EcheqFamilyInfo;
  searchInput = '';
  filtering = false;
  participantInfo: ParticipantInfoDTO;
  echeqsToSend: EcheqFamilyInfo[] = [];
  echeqSubmissionBatchDTO: EcheqSubmissionBatchDTO;
  participantIds$: Observable<string[]>;
  patientId: string;

  public participantIds: string[] = [];

  constructor(
    private apiService: EcheqDefinitionService,
    private dialog: MatDialogRef<EcheqSelectorComponent>,
    public selectedParticipantService: SelectedParticipantsService,
    private submissionService: EcheqSubmissionMedicalService,
    private snackBar: MatSnackBar,
    @Inject(MAT_DIALOG_DATA) data: any
  ) {

  }

  ngOnInit() {
    this.subscriptions.add(
      this.apiService.listEcheqFamilies().subscribe(families => {
        this.echeqs = families;
        this.allEcheqs = families;
      })
    );

    this.subscriptions.add(
      this.selectedParticipantService.getParticipantIds
        .pipe(tap(participantIds => console.log('Participants', participantIds)))
        .subscribe()
    );

      console.log('participantId',   this.participantInfo.participantId);
  }
}

但是如果我这样做:

  console.log('participantId',   this.participantInfo.participantId);

然后我会收到这个错误:

EcheqSelectorComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'participantId' of undefined
    at EcheqSelectorComponent.push../src/app/participant/modules/echeq/components/echeq-selector/echeq-selector.component.ts.EcheqSelectorComponent.ngOnInit (echeq-selector.component.ts:62)
    at checkAndUpdateDirectiveInline (core.js:18620)
    at checkAndUpdateNodeInline (core.js:19884)
    at checkAndUpdateNode (core.js:19846)
    at debugCheckAndUpdateNode (core.js:20480)
    at debugCheckDirectivesFn (core.js:20440)
    at Object.eval [as updateDirectives] (EcheqSelectorComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:20432)
    at checkAndUpdateView (core.js:19828)
    at callViewAction (core.js:20069)

那么我必须更改什么才能接收正确的数据？

谢谢

如果我这样做:

 public participantIds: string[] = [];

  constructor(
    private apiService: EcheqDefinitionService,
    private dialog: MatDialogRef<EcheqSelectorComponent>,
    public selectedParticipantService: SelectedParticipantsService,
    private submissionService: EcheqSubmissionMedicalService,
    private snackBar: MatSnackBar,
    @Inject(MAT_DIALOG_DATA) public data: any, public dialogRef:MatDialogRef<EcheqSelectorComponent>
  )
  {
    this.participantInfo = data.participant;
  }

  ngOnInit() {
    this.subscriptions.add(
      this.apiService.listEcheqFamilies().subscribe(families => {
        this.echeqs = families;
        this.allEcheqs = families;
      })
    );

    this.subscriptions.add(
      this.selectedParticipantService.getParticipantIds
        .pipe(tap(participantIds => console.log(' selected Participants', participantIds)))
        .subscribe()
    );

      console.log('participantId', this.dialogRef.id);
  }

但是如何获得

{participantId: "0bde3c11-50a2-4e4e-a9e3-08d6cccff86a"}

那么参与者Id呢？

谢谢

Answer 1

以下是如何从对话框接收返回数据的示例

async deleteRequest(id) {
const dialogRef = this.dialog.open(ConfirmationComponent, {
  width: '250px',
  data: 'Are you sure you want to delete this request?'
});
 dialogRef.afterClosed().subscribe(async result => {
  if (result == "yes") {
   console.log('yes');
  }
  else{
   console.llog('No');
  }
});

在您的对话框中

export class ConfirmationComponent implements OnInit {

constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: 
MatDialogRef<ConfirmationComponent>) { }

onNoClick() {
this.dialogRef.close('no');
}

onYesClick() {
this.dialogRef.close('yes');
}

ngOnInit() {
}

}

您可以根据您的要求返回数据并将其发送给其他人。