Angular - 如何将数据从一个组件传递到另一个

Posted 2023-02-23

【中文标题】Angular - 如何将数据从一个组件传递到另一个

【英文标题】：Angular - how to pass data from a component to another

【发布时间】：2021-07-08 15:11:53

【问题描述】：

我正在尝试对我的数据表实施数据过滤。我已经使用 ngModel 设置了一些表单，以便在我在表单中编写时填充 FormComponent 属性。例如，如果我写在 sequenceId 表单中，则 sequenceId 属性会获取该值。

export class FormComponent implements OnInit 

  constructor()  

  panelOpenState = false;
  formGroup!: FormGroup;

  sequenceId!: string;
  asOrigin!: number;
  prefix!: string;
  suffix!: number;
  collectorIp!: string;
  collectorAsn!: string;
  durationGreater!: number;
  durationSmaller!: number;
  startDate!: Date;
  endDate!: Date;
  updates!: number;
  withdraws!: number;
  announces!: number;

...

为了处理过滤，我试图将此值提供给 SequenceComponent，它负责在表中显示数据。我不知道如何将 FormComponent 中包含的信息提供给该组件。我尝试定义 FormComponent 类型的属性，但它显然与我想要获取的信息没有关联。

export class SequencesComponent

...

  datiForm!: FormComponent;

...

【参考方案1】：

您可以使用@ViewChild 获取对子组件的引用，然后检索对所需字段的引用

export class SequencesComponent

    @ViewChild(FormComponent)
    private formComponent: FormComponent; 

  public someMethod()
    this.formComponent.formGroup  <---- will give you a reference to the form of the child component