将数据从对话框组件发送到角度为6的其他组件

Question

我有一个名为delete的组件，该组件正在对话框窗口中显示。对于这个组件，我是injecting这样的数据：

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.compoent.html

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

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

模板用户界面如下所示：

如代码中所示，单击模板（delete.component.html）中的 Delete 按钮将调用onDelCustomer()函数。它将执行delete这样的操作：

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

现在的问题是，我不想在ondelCustomer()组件中调用此delete函数，我想在其他组件中调用此ondelCustomer()函数，以便我可以重用此{{ 1}}组件。

所以我尝试这样：

delete

TS

 **HTML**

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

<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) } } 时，我像上面的代码一样发出onDelCustomer()事件，并且在另一个组件（客户组件）中调用onDelete事件，如下所示：

customer.component.ts

onDelete

  

我登录客户组件时，无法从对话框组件（即删除组件）中检索数据。

我无法猜测代码出了什么问题。

DEMO

Answer 1

在“删除”按钮上单击，调用此函数：

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

在这里，action和1是任意值，可以是任意值。

现在，在打开对话框的组件中，使用以下功能：

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


}