Чтобы отправить данные JSON из диалогового компонента в другой компонент

Question

У меня есть 2 компонента с именами 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 издает эти значения JSON в компоненте delete, я могу видеть значения 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

Существует вероятность того, что вы потеряли свою область данных, потому что ваш модал удаления *ngIf и удален при нажатии кнопки get. Таким образом, в основном компонент умирает (он удален из DOM), все, что он this, не определены, пока вы пытаетесь обратиться к этим данным из другого компонента через генератор событий. Рассмотрите возможность использования общего сервиса для прохождения этого сообщения удаления между компонентами:

Укажите общий предмет в сервисе, выделите этот предмет в delete modal и подпишитесь на него в клиентском компоненте.

Answer 2

Вы должны подписаться на выходное событие onDelete в customer.component.ts. Поскольку событие генерируется только после нажатия кнопки «Удалить», а затем вызова функции удаления вашего клиентского компонента внутри подписки.

Вы можете сделать так:

  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);
       // edit
       this.onDelete();
    });
  }