您可以通过几个步骤实现这一点：
1.使用以下命令创建服务：

ng generate service data-passing

1.在服务中定义两个变量，用于保存每个组件的数据：

import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DataPassingService {
  public firstTabData;
  public secondTabData;

  constructor() { }

}

1.在组件中使用服务：

import {DataPassingService} from '...';

...
constructor(public dataPassingService: DataPassingService) {
}

1.将每个组件数据存储在相对变量中：

setDate(first, second) {
  this.dataPassingService.firstTabData = first;
  this.dataPassingService.secondTabData = second;
}

1.在选项卡中使用所需的每个数据
你也可以定义一个data变量并在那里存储数据，而不是两个变量

要将数据传递给组件，您可以使用服务或使用属性绑定和事件绑定语法，如下所示：
在tab1中，使用EventEmitter。一旦用户点击edit，调用emit函数并传递所需的数据。
使用事件绑定，检索父组件中的数据，并通过属性绑定将其传递给子组件。
点击这里：https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/
要切换tab，请使用@ViewChild装饰器将<mat-tab-group>注入component.ts中，并更改其selectedIndex属性。

你可以在第一个组件中使用@Output-->在变量中存储值你可以在第二个组件中使用@Input并传递上面的变量
代码如下所示：

<mat-tab-group>
  <mat-tab label="View">
    <div>
      <app-customer-table (onClickEdit)="edit($event)"></app-customer-table>
    </div>
  </mat-tab>
  <mat-tab label="Edit">
    <div>
      <app-customer-create [customerId]="customerId"></app-customer-create>
    </div>
  </mat-tab>
</mat-tab-group>

// main-componet.ts file

edit(value)=>{
this.customerId = value;
}

// customer-create.component.ts

@Input CustomerId;

// customer-table.component.ts
@Output onClickEdit = new EventEmitter<string>();