Angular 6 - MatDialog - EventEmitter - делить объект с родительским компонентом из MatDialog - PullRequest
Новая
       22

Angular 6 - MatDialog - EventEmitter - делить объект с родительским компонентом из MatDialog

1 голос
/ 07 мая 2019

Прямо сейчас может общаться между двумя компонентами.но не знаю, как передать введенное пользователем (выбранное) значение как объект через генератор событий из компонента MatDialog в родительский компонент.Здесь я хочу передать значение выбранного параметра и текстовой области как объект после нажатия кнопки отправки.

dialog.html 

          <mat-select [(ngModel)]="selectedIssue"  [ngModelOptions]="{standalone: true}">
            <mat-option  [value]="option1">Option AA</mat-option>
            <mat-option  [value]="option2">Option BB</mat-option>
            <mat-option  [value]="option3">Option CC</mat-option>
            <mat-option  [value]="option4">Option DD</mat-option>
            <mat-option  [value]="option5">Option EE</mat-option>
          </mat-select>


         <div>
            <textarea class="mention-reason" [(ngModel)]="reason" [ngModelOptions]="{standalone: true}"></textarea>
        </div>

    <button class="cancel" matDialogClose>Cancel</button>      
    <button class="submit" [mat-dialog-close] (click)="submitUserReason()">Submit</button></span>

dialog.ts

onSubmitReason = new EventEmitter();
    submitUserReason(): void {
        this.onSubmitReason.emit('hello');
    }

    onConfirmClick(): void {
        this.dialogRef.close(true);     
    }

parent.ts 

callSupport() {
        const dialogRef = this.dialog.open(customerSupportComponent);
        const subscribeDialog = dialogRef.componentInstance.onSubmitReason.subscribe((data) => {
          console.log('dialog data', data);
          //i can see 'hello' from MatDialog
        });

    dialogRef.afterClosed().subscribe(result => {      
      subscribeDialog.unsubscribe();
    });

Большое спасибо всем, кто помогает.

Ответы [ 2 ]

2 голосов
/ 07 мая 2019

Я предполагаю, что есть две кнопки.1) отправить 2) закрыть

Итак, если вы хотите, чтобы выбранные данные в родительском компоненте при нажатии кнопки отправки затем, 

submitUserReason(): void {
   this.dialogRef.close({ option: userSelectedOption, reason:userReason });
}

И в родительском компоненте, 

dialogRef.afterClosed().subscribe(result => {
console.log(result);
});
1 голос
/ 07 мая 2019

В вашем dialog.ts вы хотите передать выбранную опцию вместо просто строки. Что-то вроде: 

submitUserReason(): void {
   this.onSubmitReason.emit(selectedIssue);
}

Вы можете излучать все, что захотите (в зависимости от того, как вы набрали текст), поэтому, если вы хотите передать больше данных, вы также можете передать объект: 

submitUserReason(): void {
   let data = { issue : selectedIssue, reason: userReason};
   this.onSubmitReason.emit(data);
}
...