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

Question

我正在尝试对我的数据表实施数据过滤。我已经使用 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;

...
}

Answer 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

  }

}