如何在Angular中深入捕获3个组件的值

问题描述 投票:1回答:1

我的角度应用程序中有三个组件,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可以调用方法并传递该数据?

javascript angular angular-material
1个回答
0
投票

你在组件-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),将使用输出

© www.soinside.com 2019 - 2024. All rights reserved.