时间戳

首页 > 解决方案 > 如何在 Angular 中捕获价值 3 组件

javascript - 如何在 Angular 中捕获价值 3 组件

问题描述

我的 Angular 应用程序中有三个组件，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()方法，该方法返回一个我订阅的 observable组分 A -dialogRef.afterClosed().subscribe(...)

这是让我绊倒的部分。我需要能够调用组件 B 中的方法（嵌套在组件 A 中的方法），一旦模式对话框关闭并且组件 A 中接收到来自模式的数据。我需要将该表单数据传递到组件 B 中的方法。问题是当页面最初加载时，表单数据是未定义的。我想我可以通过 @Output 装饰器和一些自定义事件绑定的组合来做到这一点，但我不太明白。

我该如何做到，当模态对话框关闭并将数据传回组件 A 时，嵌套组件 B 可以调用方法并将数据传入？

标签： javascriptangularangular-material

解决方案

您在组件 b 中缺少 @Input

应用组件-a.html

<app-component-b [data]="form-data"></app-component-b>

应用程序组件 b.ts

@Input() data; // Here will be the data

因此，在您关闭对话框并接收到数据后，您需要将其传递给组件-b。由于 component-b 是子组件，因此您需要在 component-b 中使用 @Input 装饰器。如果您需要将数据传递给父组件（从 component-b 到 component-a ），将使用输出

推荐阅读