В моем угловом приложении три компонента: A, B и C. A - основной компонент, B - меньший раздел, вложенный в A, а C - модальное диалоговое окно.
Код шаблонадля компонента A выглядит примерно так ...
<main>
<h1>Component body title</h1>
<app-component-b></app-component-b>
<button (click)="openModal()">Open</button>
</main>
Файл компонента A ts
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { ComponentC } from '../component-c/component-c.component';
@Component({
selector: 'app-component-a'
})
export class ComponentA {
public data;
public form-data;
constructor (private dialog: MatDialog) {}
public openModal() {
const dialogRef = this.dialog.open(ComponentC, {
height: '100%',
data: this.data
});
dialogRef.afterClosed().subscribe(result => {
this.form-data = result;
});
}
}
В компоненте A вы можете открыть модальное диалоговое окно, т.е. компонент C. Внутри модального диалогового окнаесть форма, которую вы заполняете, и когда вы отправляете, form.value передается в метод MatDialog close(), который возвращает наблюдаемое, на которое я подписываюсь, в компоненте A - dialogRef.afterClosed().subscribe(...)
Вот та часть, которая сбивает меня с толку.Мне нужно иметь возможность вызывать метод внутри компонента B (тот, который вложен в компонент A), после закрытия модального диалога и получения данных из модального режима в компоненте A. Мне нужно передать эти данные формы вМетод в Компоненте B. Проблема заключается в том, что при начальной загрузке страницы данные формы не определены.Я полагаю, что мог бы сделать это через комбинацию декоратора @Output и некоторой пользовательской привязки событий, но я не могу понять это.
Как мне сделать так, чтобы, когда модальный диалог был закрыт иданные передаются обратно компоненту A, вложенный компонент B может вызывать метод и передавать эти данные в?