Question

我有两个分别称为list和details的组件，它们分别位于一个称为customer的组件中。单击delete组件中的details按钮后，将打开一个对话框窗口，如下所示：

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

HTML

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

TS

 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)
      }


    }

当我在log组件中delete发出那些JSON值时，我可以看到这样的JSON值：

但是当在customer组件中记录相同的发射值时，我看不到，我像这样调用发射的函数：

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

DEMO

更新的代码

以前，我是在delete组件本身中执行 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);
  }

但是我想像这样在delete组件中执行customer操作：

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

因为我想将delete组件作为通用组件，以便我可以重用它，所以我想在客户中执行delete操作。

Answer 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);
    });
  }

Answer 2

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

提供服务中的常见主题，以删除模式向该主题发出并在客户组件中进行订阅。

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

2 个答案: