Angular 与反应形式数据的角度6分量相互作用

我有两个组件，比如EmployeeInfo、CompanyInfo，每个组件都有反应式表单数据（表单控件），在第二个组件中我有submit按钮

---

我的问题是，当我单击第二个组件（CompanyInfo）中的提交按钮并将其发送到后端时，如何从第一个组件（EmployeeInfo）收集表单数据。（发送后端不是主要问题，但从第一个组件收集数据才是实际问题）.有人能帮我吗？

这是指组件之间的通信或组件交互。在角度上，它可以通过。如果组件之间存在父/子关系，则可以使用EventEmitter，就像使用@Input和@Output属性一样。否则，如果组件是独立的（即不是父/子组件），您可以执行相同的操作，但通过中间服务，一个组件将调用服务方法来发出事件，而第二个组件将侦听服务的发出。对于服务，您应该使用BehaviorSubject或Observable，而不是EventEmitter。下面是所有可能的方式与组件之间的角度交互。

下面是您可以使用的方式之一

demo1.component.html

<form [formGroup]="profileForm">
    Name: <input type="text" formControlName="firstName"/><br>
    Mobile:<input type="text" formControlName="lastName"/>
</form>

<input type="submit" id="btnSubmit" (click)="onSubmit()">

demo2.component.html

<form [formGroup]="profileForm">
    Name: <input type="text" formControlName="firstName"/><br>
    Mobile:<input type="text" formControlName="lastName"/>
</form>

<input type="submit" id="btnSubmit" (click)="onSubmit()">

现场演示

---

最好在将数据存储到sessionStorage/localStorage之前对其进行加密。

您可以使用该服务实现这一点。共享服务将是一个不错的选择

您的服务

public sharedEmployeeInfo = {};

EmployeeInfo.HTML

<form #EmployeeInfo="ngForm">
    .
    .
    <button (click)="SubmitEmployeeInfo(EmployeeInfo.value)">Submit</button>
<form>

import {sharedService} from './sharedService';

constructor(private shared:sharedService){}

SubmitEmployeeInfo(EmployeeInfo){
     // here you will set Employee data to your service object
     this.shared.sharedEmployeeInfo = EmployeeInfo;
}

然后在您的公司信息组件中

import {sharedService} from './sharedService';

constructor(private shared:sharedService){}

EmployeeData;

SubmitCompanydata(){
    // here you will get employee form data 
    this.EmployeeData = this.shared.sharedEmployeeInfo;   
}

---

为什么没有三个组件：一个formGroup={EmployeeInfo，CompanyInfo}的父级和两个孩子（每个孩子都有一个formGroup，其中包含employer和Company的数据）。父级具有提交的boton权限

母公司

<form *ngIf="myForm" [formGroup]="myForm" (submit)="submit()">
   <app-company-info [control]="myForm.get('companyInfo')"></app-company-info>
   <app-employee-info [control]="myForm.get('employeeInfo')"></app-employee-info>
   <button>submit</button>
</form>
{{myForm?.value|json}}

constructor(private fb:FormBuilder){}
  myForm=this.fb.group({
     companyInfo:this.fb.group({
         name:'',
         address:''

     }),
     employeeInfo:this.fb.group({
         firstName:'',
         secondName:''
     })
})

感谢所有人的建议/帮助，在此，我将根据我的要求回答我的问题，并根据该要求进行研究，以便对其他人有所帮助。
1.使用服务实现组件间的数据共享。
2.我在每个组件中使用多个表单（获取用户数据），并在最终组件中提交所有数据，因此用户可以在任何给定时间以任何表单修改数据，因此我使用了可观察的。
3.在我的情况下，我需要用于收集不同类别数据的选项卡，因此使用mat tab group。
分享您的代码，因为我们可以更好地理解sneha回复感谢。目前我还没有准备好代码，但基本上我发布了基于建议/更好的方法继续开发的要求。@Ravi，有一个“更自然”的方法来解决您的问题，一个包含两个孩子的组件：公司信息和就业信息（见我的答案）似乎是非常好的用例@Eliseo。。非常感谢Hanks Ali，让我试试这些。你能提供任何关于这个的stackbliz（如果你发现的话）吗？嗨，Ravi，这里是关于组件交互的角度文档，包括所有可能的方式以及实例。欢迎@Ravi，另外我还添加了stackbliz链接。
     <form *ngIf="control" [formGroup]="control">
        <input formControlName="name">
        <input formControlName="address">
     </form>

  @Input() control

     <form *ngIf="control" [formGroup]="control">
        <input formControlName="firstName">
        <input formControlName="secondName">
     </form>

  @Input() control:FormGroup