Angular 8 - Получение данных в родительский компонент из всплывающего модального окна с помощью emitevent

У меня есть приложение Angular 8, у которого есть родительский компонент, который при нажатии кнопки отображает всплывающее модальное диалоговое окно. Когда я нажимаю кнопку «Сохранить» во всплывающем диалоговом окне, я хочу отправить выбранный объект обратно родительскому компоненту.

Я считаю, что лучший способ сделать это - использовать EventEmitter. У меня установлен эмиттер в модальном диалоге. Но я не могу вернуть данные родителю. Это то, что у меня есть ... РОДИТЕЛЬСКИЙ КОМПОНЕНТ: HTML

 <mat-toolbar color="primary">
    <button
      mat-raised-button
      color="primary"
      id="mat-toolbar__get-rate-button-id"
      [disabled] = !triplegForm.valid
      (click) = "getRates($rateEvent)"
    >
      GET RATE
    </button>
  </mat-toolbar>

КОД ТС

 getRates(rateEvent):void{
   let getRateDialog = this.getRateDialog.open(GetRatesComponent, {
      width: '95%',
      height: '80%'
    });

     getRateDialog.afterClosed().subscribe( result => {
       this.selectedRate = result
       console.log("returned from rate dialog: ", this.selectedRate.rateAmount);
     });
  }

ВСПЛЫВАЮЩИЙ МОДАЛЬНЫЙ HTML

<mat-toolbar>
    <button id="rateModalSave" mat-raised-button color="primary"
            [disabled]="!enableSaveButton()" (click)="saveRate()">SAVE
    </button>
  </mat-toolbar>

КОД ТС

export class GetRatesComponent implements OnInit {
  selectedRate: Rate;
  constructor(private  rateService: RateService,
              private dialogRef: MatDialogRef<GetRatesComponent>) {
  }
  ...
 saveRate() {
   console.log("selected rate: ", this.selectedRate);
    this.rateSaved.emit(this.selectedRate);
     this.dialogRef.close();
  }
}

Таким образом, selectedRate установлен в дочернем компоненте. Но this.selected.rateAmount в операторе ведения журнала в родительском элементе не определен.

После того, как скорость передается из дочернего элемента, мне нужно закрыть всплывающее окно. Но я не вижу


angular angular-event-emitter
person Gloria Santin    schedule 21.11.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вот как я заставил его работать с помощью приведенного выше ответа ... Я изменил метод getRate в родительском элементе на это: HTML:

 (click) = "getRates()"

Код TS в родительском элементе:

 getRates():void{
   let getRateDialog = this.getRateDialog.open(GetRatesComponent, {
      width: '95%',
      height: '80%'
    });

   getRateDialog.componentInstance.rateSaved.subscribe((selectedRate) => {
         this.selectedRate = selectedRate;
         console.log("returned from rate dialog: ", this.selectedRate.rateAmount);
    });
  }

Модальный код был правильным.

person Gloria Santin    schedule 21.11.2020

arrow_upward
0
arrow_downward

у вас есть вариант:

  1. воспользоваться услугой

  2. mat dialog имеет эту функцию
    в диалоге ts 

        ...
      saveRate() {
      this.dialogRef.close({value: this.selectedRate});
    }

in parent component 
        ....
        let dialogRef = dialog.open(UserProfileComponent, {
             height: '400px',
             width: '600px',
       });
       // here is your value
       dialogRef.afterClosed().subscribe(res => {
        console.log(res.value); // your value!
       });
person javad zia ebrahimi    schedule 21.11.2020
comment
Это не сработало. Но мое решение похоже ... разместил его ниже - person Gloria Santin; 21.11.2020