将数据从dialog组件发送到angular 6中的其他组件

我在对话框窗口中显示了一个名为

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

 **HTML**

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

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

删除.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);
  }


 }

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


 }

现在的问题是，我不想在

delete

组件中调用此

ondelCustomer（）

函数，我想在其他组件中调用此

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

 **HTML**

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

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

当我登录客户组件时，我无法从对话框组件（即删除组件）接收数据

我猜不出代码出了什么问题

---

单击删除按钮，调用此功能：

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

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


}

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

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

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

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


}

从'@angular/core'导入{Component，OnInit，Input}；
从“../Service”导入{Service}；
从“rxjs/operators”导入{map}；
从“../models”导入{IContact}；
从“@angular/material”导入{MAT_DIALOG_数据、MatDialog、MatDialogRef、MatListOption}；
从“../delete/delete.component”导入{DeleteComponent}；
@组成部分({
选择器：“应用程序客户”，
templateUrl:“./customer.component.html”，
样式URL:['./customer.component.css']
})
导出类CustomerComponent实现OnInit{
@输入（）
数据；
联系人：IContact[]；
someContact:IContact[]；
构造函数（公共对话框：MatDialog，
公共CustomerServiceList:服务{}
公共异步ngOnInit（）：承诺{
this.contacts=等待此.CustomerServiceList.getContactList（）；
}
public openDialogDelete（$event:any）：void{
此.dialog.open（删除组件{
宽度：“350px”，数据：$event，
}).afterClosed（）.subscribe（数据=>{
if（data&&data.action==1）{
this.onDelete（data.data）；
}
});
}
公共onDelete（数据：任意）{
log（'called'）；
this.someContact=数据；
console.log（this.someContact）；
}
}

查看此链接，了解如何在service（）的帮助下将数据资料dilaog共享到组件。您检查过我的示例吗？我检查过了，但我无法在代码中实现。感谢您的回答，

操作：1

意味着什么？它可以是任何东西，比如随机：“测试”，它只是我们在父组件中使用的任何键值对，用于验证delete button click是否导致对话框关闭，因为我们仅在单击delete button时传递此特定数据。希望这能消除你的疑虑，永远是我的荣幸。：）