将 JSON 数据从对话框组件发送到其他组件答案

【问题标题】：To send JSON data from dialog component to other component将 JSON 数据从对话框组件发送到其他组件
【发布时间】：2019-06-11 14:09:44
【问题描述】：

我有两个名为 list 和 details 的组件被放置在名为 customer 的组件内。单击details 组件中的delete 按钮时，将打开一个对话框窗口，如下所示：

单击对话框窗口中的delete 按钮时，我将发出一个名为onDelete 的函数以及JSON 值，以便我可以重新使用它其他组件中的函数（onDelete）。

HTML

 <p>Do you want to delete <span>{{data?.title}} ?</span></p>
   <br>
  <button (click)="onDelCustomer()">DELETE</button>

 import { Component, Input , OnInit, Output, Inject, EventEmitter } from 
  '@angular/core';
 import {
    FormBuilder,
    FormControl,
    FormGroup,
    Validators,
   } from '@angular/forms';
   import {MAT_DIALOG_DATA} from '@angular/material';
    @Component({
      selector: 'app-delete',
      templateUrl: './delete.component.html',
      styleUrls: ['./delete.component.css']
     })
    export class DeleteComponent {
      @Input()
      public contact;

     @Output() public onDelete: EventEmitter<{}> = new EventEmitter();

     constructor(@Inject(MAT_DIALOG_DATA) public data: any,
        private fb: FormBuilder,) { }


      public onDelCustomer(): void {
       this.onDelete.emit(this.data); <==========
       console.log(this.data)
      }


    }

当我 logdelete 组件中那些发出的 JSON 值时，我能够看到如下 JSON 值：

但是当在customer 组件中记录相同的发射值时，我看不到，我正在调用发射函数，如下所示：

  public onDelete() {
    this.someContact = this.data; <========
    console.log(this.someContact);
  }

DEMO

更新代码

以前我在delete 组件本身中执行删除操作，如下所示：

  public onDelCustomer(): void { <============== code for deleting customer
    this.someContact = this.data;
    this.someContact.id = this.data.id;
    this.customersServiceList.deleteContact('00000000-11111-1111-0000000', 
    this.someContact, this.someContact.id);
  }

但我想在customer 组件中执行delete 操作，如下所示：

   public onDelete() {
    this.someContact = this.data;
    this.someContact.id = this.data.id;
    this.customersServiceList.deleteContact('00000000-11111-1111-0000000', 
     this.someContact, this.someContact.id);
  }

因为我想将deletecomponent 做成一个通用组件以便我可以重复使用它，所以我想在客户中执行delete 操作。

【问题讨论】：

你在用材料吗？
是的，我正在使用material，但是material 和我的issue 之间有什么联系？
m= 我回答错了.. 感谢您浪费我的时间

标签： angular typescript angular-material angular6

【解决方案1】：

您必须在 customer.component.ts 中订阅 onDelete 输出事件。因为该事件仅在单击删除时才会发出，然后在订阅中调用您的客户组件的删除函数。

你可以这样做：

  public openDialogDelete($event: any): void {
    const dialogRef: MatDialogRef<DeleteComponent> = this.dialog.open(
      DeleteComponent,
      {
        width: "350px",
        data: $event
      }
    );
       // add these lines
    dialogRef.componentInstance.onDelete.subscribe(data => {
      console.log("deleted data--", data);
       // edit
       this.onDelete();
    });
  }

【讨论】：

【解决方案2】：

您可能会丢失数据范围，因为您的删除模式是*ngIf-ed，并在单击按钮时被删除。因此，基本上组件死亡（它已从 DOM 中删除），当您尝试通过事件发射器从其他组件引用此数据时，所有 this 都是未定义的。考虑使用通用服务跨组件遍历这条删除消息：

在服务中提供公共主题，在删除模式中向该主题发出并在客户组件中订阅它。

【讨论】：