angular - 以 Angular 6 将数据从对话框组件发送到其他组件

Question

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

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


 }

删除.compoent.html

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

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

模板 UI 如下所示:

如代码所示，在模板(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);
  }

现在的问题是我不想在 delete 组件中调用这个 ondelCustomer() 函数，我想调用这个 ondelCustomer()在其他组件中运行，这样我就可以重用这个delete组件。

所以我这样尝试:

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


 }

在调用 onDelCustomer() 时，我像上面的代码一样发出 onDelete 事件，并且在另一个组件中调用 onDelete 事件(客户组件)像这样:

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


 }

When i log in customer component i am unable to recive the data from dialog component(i,e delete component).

我猜不出代码有什么问题。

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


}