Angular Material — это мощная библиотека компонентов пользовательского интерфейса для приложений Angular. Одним из наиболее часто используемых компонентов является диалоговое окно, которое обеспечивает модальное наложение для отображения контента. При работе с диалоговыми окнами Angular Material вы часто можете столкнуться со сценариями, когда вам необходимо передать данные обратно в родительский компонент при закрытии диалогового окна. В этой статье мы рассмотрим семь различных методов достижения этой цели, используя разговорный язык и попутно предоставляя примеры кода.

Метод 1: EventEmitter
Класс EventEmitter в Angular позволяет создавать собственные события и передавать данные от дочерних компонентов их родителям. Используя эту функцию, вы можете определить событие в компоненте диалогового окна и передать необходимые данные при закрытии диалогового окна. Родительский компонент может затем подписаться на это событие и соответствующим образом обрабатывать передаваемые данные.

Пример кода:
Диалоговый компонент:

import { EventEmitter, Output } from '@angular/core';
export class DialogComponent {
  @Output() dataPassed = new EventEmitter<string>();
  onClose() {
    // Emit data to parent component
    this.dataPassed.emit('Hello from the dialog!');
  }
}

Родительский компонент:

handleDataPassed(data: string) {
  console.log(data); // Output: Hello from the dialog!
}

Метод 2: входное свойство
Другой подход заключается в передаче данных непосредственно через привязку входного свойства. Вы можете определить входное свойство в компоненте диалога и привязать его к значению в родительском компоненте. Когда диалоговое окно будет закрыто, родительский компонент автоматически получит доступ к обновленному значению.

Пример кода:
Диалоговый компонент:

import { Input } from '@angular/core';
export class DialogComponent {
  @Input() data: string;
  onClose() {
    // Modify the data before closing the dialog
    this.data = 'Modified data';
  }
}

Шаблон родительского компонента:

<app-dialog [data]="parentData"></app-dialog>

Метод 3: Сервис
Использование общего сервиса — еще один эффективный способ передачи данных между компонентами в Angular. Вы можете создать службу с субъектом или BehaviorSubject для хранения данных и подписаться на них как в диалоговом, так и в родительском компонентах. Когда диалог закрыт, вы можете обновить данные в сервисе, и родительский компонент получит обновленное значение.

Пример кода:
Общая служба:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
  private dataSubject = new BehaviorSubject<string>('Initial data');
  data$ = this.dataSubject.asObservable();
  updateData(data: string) {
    this.dataSubject.next(data);
  }
}

Диалоговый компонент:

export class DialogComponent {
  constructor(private dataService: DataService) {}
  onClose() {
    // Update data in the service
    this.dataService.updateData('Data from the dialog');
  }
}

Родительский компонент:

export class ParentComponent {
  data: string;
  constructor(private dataService: DataService) {
    this.dataService.data$.subscribe((data) => {
      this.data = data; // Update data in the parent component
    });
  }
}

Метод 4: Декоратор вывода с EventEmitter
Подобно методу 1, вы можете использовать декоратор вывода вместе с EventEmitter для отправки данных непосредственно из компонента диалога. Однако вместо определения пользовательского события вы можете использовать встроенное событие закрытия, предоставляемое MatDialogRef Angular Material.

Пример кода:
Диалоговый компонент:

import { Output, EventEmitter } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
export class DialogComponent {
  @Output() dataPassed = new EventEmitter<string>();
  constructor(private dialogRef: MatDialogRef<DialogComponent>) {}
  onClose() {
    // Emit data to parent component
    this.dataPassed.emit('Hello from the dialog!');
    this.dialogRef.close();
  }
}

Родительский компонент:

handleDataPassed(data: string) {
  console.log(data); // Output: Hello from the dialog!
}

Метод 5: Observable AfterClosed MatDialog
MatDialog Angular Material предоставляет наблюдаемую AfterClosed, которая выдает значение при закрытии диалога. Вы можете использовать эту наблюдаемую для получения данных, передаваемых из диалога, когда он закрыт.

Пример кода:
Диалоговый компонент:

import { MatDialogRef } from '@angular/material/dialog';
export class DialogComponent {
  constructor(private dialogRef: MatDialogRef<DialogComponent>) {}
  onClose() {
    // Pass data to parent component
    this.dialogRef.close('Data from the dialog');
  }
}

Родительский компонент:

import { MatDialog } from '@angular/material/dialog';
export class ParentComponent {
  constructor(private dialog: MatDialog) {}
  openDialog() {
    const dialogRef = this.dialog.open(DialogComponent);
   dialogRef.afterClosed().subscribe((data) => {
        console.log(data); // Output: Data from the dialog
      });
  }
}

Метод 6: локальное хранилище
Если вам необходимо сохранить данные даже после обновления или повторного открытия приложения, вы можете использовать локальное хранилище браузера для хранения данных. В компоненте диалога вы можете сохранить данные в локальном хранилище перед закрытием диалога, а в родительском компоненте вы можете при необходимости получить данные из локального хранилища.

Пример кода:
Диалоговый компонент:

onClose() {
  // Save data to local storage
  localStorage.setItem('dialogData', 'Data from the dialog');
}

Родительский компонент:

getDataFromLocalStorage() {
  const data = localStorage.getItem('dialogData');
  console.log(data); // Output: Data from the dialog
}

Метод 7: навигация по маршрутизатору с параметрами запроса
Если диалоговое окно используется внутри маршрута и вы хотите передать данные родительскому компоненту, вы можете использовать параметры запроса. Закрыв диалоговое окно, вы можете вернуться к родительскому компоненту с необходимыми данными в качестве параметров запроса.

Пример кода:
Диалоговый компонент:

import { Router } from '@angular/router';
export class DialogComponent {
  constructor(private router: Router) {}
  onClose() {
    // Navigate back to parent component with query parameters
    this.router.navigate(['/parent-component'], { queryParams: { data: 'Data from the dialog' } });
  }
}

Родительский компонент:

import { ActivatedRoute } from '@angular/router';
export class ParentComponent {
  constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe((params) => {
      console.log(params.data); // Output: Data from the dialog
    });
  }
}

В этой статье мы рассмотрели семь различных методов передачи данных при закрытии диалогового окна Angular Material. Эти методы включают использование EventEmitter, входных свойств, сервисов, выходных декораторов, наблюдаемого AfterClosed, локального хранилища и навигации по маршрутизатору с параметрами запроса. Выбрав наиболее подходящий метод в зависимости от ваших конкретных требований, вы сможете эффективно передавать данные между диалоговым окном и родительскими компонентами в ваших приложениях Angular.