typescript - Pentru a trimite date din componenta de dialog către alte componente în Angular 6

Am un component numit delete pe care îl afișez în fereastra de dialog. Pentru acest component, injectez date astfel:

delete.component.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;

constructor(@Inject(MAT_DIALOG_DATA) public data: any,
        private fb:FormBuilder,) {} <=== Injecting data to component

 public ondelCustomer(): void {  <======== DELETE Function
   this.someContact = this.data;
   this.someContact.id = this.data.id;
   this.customersService.deleteContact('00000000-11111-1111-0000000', 
   this.someContact, this.someContact.id);
  }


 }

delete.component.html

  <p>Do you want to delete <span>{{data?.name}}?</span></p>

  <button  (click)="onDelCustomer()">DELETE</button>

Interfața șablonului arată astfel:

Așa cum este arătat în cod, la clic pe butonul DELETE din șablon (delete.component.html) va apela funcția onDelCustomer(), care va efectua operațiunea de ștergere astfel:

  public ondelCustomer(): void {
   this.someContact = this.data;
   this.someContact.id = this.data.id;
   this.customersService.deleteContact('00000000-11111-1111-0000000', 
   this.someContact, this.someContact.id);
  }

Acum problema este că nu vreau să apelez această funcție ondelCustomer() în componenta delete, vreau să apelez această funcție ondelCustomer() în alte componente, astfel încât să pot reutiliza această componentă delete.

Așa că am încercat așa:

 **HTML**

 <p>Do you want to delete <span>{{data?.name}}?</span></p>

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


 }

La apelarea onDelCustomer(), emit evenimentul onDelete așa cum este în codul de mai sus și apelez evenimentul onDelete într-un alt component (componenta client) astfel:

client.component.ts

  import { Component, OnInit,Input } from '@angular/core';
  import { Service } from '../service';
  import { map } from 'rxjs/operators';
  import { IContact } from '../models';
  import {MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatListOption} from 
  '@angular/material';
  import { DeleteComponent } from '../delete/delete.component';

  @Component({
    selector: 'app-customer',
    templateUrl: './customer.component.html',
    styleUrls: ['./customer.component.css']
  })

  export class CustomerComponent implements OnInit {
  @Input()
  data;

  contacts:IContact[];
  someContact:IContact[];

  constructor(public dialog: MatDialog,
         public customersServiceList: Service) {}

  public async ngOnInit(): Promise<void> {
   this.contacts  = await this.customersServiceList.getContactList();
  }

  public openDialogDelete($event: any): void { 
    const dialogRef: MatDialogRef<DeleteComponent> = 
    this.dialog.open(DeleteComponent,{ width:'350px',data:$event,});
  }

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


 }

Când mă conectez la componenta customer, nu pot primi datele din componenta dialog (adică componenta de ștergere).

Nu pot să ghicesc ce este în neregulă cu codul.

DEMONSTRAȚIE

Răspuns #1

La clic pe butonul Ștergere, apelează această funcție:

onDeleteClick() {
  this.dialog.close({action: 1, data: this.data});
}

Aici, action și 1 sunt valori arbitrare, pot fi orice.

Acum, în componenta din care ai deschis dialogul, folosește această funcție:

import { Component, OnInit,Input } from '@angular/core';
import { Service } from '../service';
import { map } from 'rxjs/operators';
import { IContact } from '../models';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatListOption} from '@angular/material';
import { DeleteComponent } from '../delete/delete.component';
@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
  @Input()
  data;
 contacts:IContact[];

someContact:IContact[];

 constructor(public dialog: MatDialog,
             public customersServiceList: Service) {}



  public async ngOnInit(): Promise<void> {
   this.contacts  = await this.customersServiceList.getContactList();
  }

 public openDialogDelete($event: any): void { 
  this.dialog.open(DeleteComponent, {
    width: '350px',data:$event,
}).afterClosed().subscribe(data => {
  if(data && data.action === 1) {
    this.onDelete(data.data);
  }
});

}

public onDelete(data: any) {
  console.log('called');
this.someContact = data;
console.log(this.someContact);
}


}