我的角度应用程序中有三个组件,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可以调用方法并传递该数据?
你在组件-b中缺少@Input
应用组分-a.html
<app-component-b [data]="form-data"></app-component-b>
APP-组件b.ts
@Input() data; // Here will be the data
因此,关闭对话框并接收数据后,需要将其传递给组件-b。由于component-b是component-child,你需要在component-b中使用@Input装饰器。如果需要将数据传递给父组件(从组件-b到组件-a),将使用输出