Angular 8 - 使用 emitevent 从弹出模式获取数据到父组件

Question

我有一个 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>

TS 代码

 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>

TS 代码

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 是未定义的。

子项发出速率后，我需要关闭弹出窗口。但是我没有看到

Answer 1

你必须选择：

使用服务

垫子对话框有这个功能
在对话中

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

在父组件中

        ....
        let dialogRef = dialog.open(UserProfileComponent, {
             height: '400px',
             width: '600px',
       });
       // here is your value
       dialogRef.afterClosed().subscribe(res => {
        console.log(res.value); // your value!
       });

Answer 2

这就是我在上述答案的帮助下让它工作的方式... 我将父级中的 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);
    });
  }

模态代码正确。

Angular 8 - 使用 emitevent 从弹出模式获取数据到父组件

Angular 8 - Get data to parent component from popup modal using emitevent

angular

angular-event-emitter