如何以角度将数据从一个组件传递到另一个组件？

Question

我有两个组件作为对话框。在父组件中，有一个按钮。单击按钮后，将打开另一个对话框（子级），其中有两个字段，即“保存”和“关闭”按钮。如果我在子组件中填写表格，然后按保存按钮，则数据将存储在数据库中。我需要将数据/对象（已保存）发送给父对象。

我已经提出了一些对我不起作用的答案。我已经提到了this视频，并且能够在组件之间传递数据，但是它不适用于对话框。在这里，我附加了一些代码。

父组件HTML。

 <div class="col-sm-2">
    <button md-button color="primary" (click)="openChild()">New Detail</button>
  </div>

我在父组件HTML中有一个按钮。单击该按钮时，子组件将被打开。我编写了一个函数，用于从parent.component.ts文件。

中调用子组件。

 openChild(): void {
    const dialogRef = this.dialog.open(ChildDialogComponent,  {
      width: '50%',
      data: {}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

子组件HTML

<ol class="breadcrumb">
  <li class="breadcrumb-item active">New Detail</li>
</ol>
<div *ngIf="data">
    <div class="row">
        <div class="col-md-6">
            <label for="name">Full Name</label> <input type="text"
                id="name" [(ngModel)]="data.fullName" #name="ngModel"
                class="form-control" required>
            <span class="md-errors-spacer"
                *ngIf="name.invalid && (name.dirty || name.touched)"
                style="color: red"> <span
                *ngIf="name.errors.required">Mandatory
            </span>
        </div>

        <div class="col-md-6">
            <label for="mobile">Mobile</label> <input type="text"
                [(ngModel)]="data.mobile" class="form-control" id="mobile"
                #mobile="ngModel" required>
                <span class="md-errors-spacer"
                *ngIf="mobile.invalid && (mobile.dirty || mobile.touched)"
                style="color: red"> <span
                *ngIf="mobile.errors.required">Mandatory.</span> 
        </div>
    </div>  
</div>
  <div md-dialog-actions>
    <button md-button (click)="onClose()">Close</button>
    <button md-button color="primary" (click)="save()">Save</button>
  </div>

填写表格后单击保存按钮时，将存储数据。我需要将该数据传递给父组件。

Child.component.ts

import { Component, OnInit} from '@angular/core';
import { DetailService } from '../detail/detail.service';
import { ActivatedRoute } from '@angular/router';
import { Detail} from '../detail/detail';
import { MdDialogRef } from '@angular/material';

@Component({
  selector: 'app-detail-dialog',
  templateUrl: './detail-dialog.component.html',
  styleUrls: ['./detail-dialog.component.css']
})
export class DetailDialogComponent implements OnInit {

  public data: Detail;
  error: any;
  navigated = false;
  public success: string = null;

  constructor(private service: DetailService, private route: ActivatedRoute,
    public dialogRef: MdDialogRef<DetailDialogComponent>,) { 
      dialogRef.disableClose = true;
     }

  ngOnInit() {
    this.navigated = true;
    this.data = new Detail();
    this.success = null;
  }

  save(): void {
    this.service
        .save(this.data)
        .then(data => {
          this.data = data;
          this.success = "Detail Saved";
        })
        .catch(error => this.error = "Error while saving detail");
  }

  onClose(): void {
    this.dialogRef.close({
      data: this.data});
  }  

}

在上面的child.component.ts中，我试图在关闭对话框时传递数据。但是我不知道如何在parent.component.ts中获取它。谁能帮我解决这个问题？

Answer 1

保存详细信息后必须关闭对话框，并将数据传递给父组件。

 save(): void {
    this.service
        .save(this.data)
          .then(data => {
              this.data = data;
              this.success = "Detail Saved";
              this.dialogRef.close({
                  data: this.data});
              }
    })
    .catch(error => this.error = "Error while saving detail");
  }

并且在父组件中，您可以在afterClosed事件中获取数据

dialogRef.afterClosed().subscribe(result => {
  console.log(result.data);
});

或者，由于您将数据保存在DetailService中，因此可以通过在该服务类中编写一个方法来从该服务取回数据。

希望有所帮助。