typescript 如何切换Tab和传递数据

qltillow  于 2023-05-19  发布在  TypeScript
关注(0)|答案(3)|浏览(300)

我的组件结构
客户-物料页签

  • 包含Tab 1-客户表视图
  • 包含Tab 2-编辑客户视图
<mat-tab-group>
  <mat-tab label="View">
    <div>
      <app-customer-table></app-customer-table>
    </div>
  </mat-tab>
  <mat-tab label="Edit">
    <div>
      <app-customer-create></app-customer-create>
    </div>
  </mat-tab>
</mat-tab-group>

When I click on an "edit" icon, that is inside Tab1, I want to switch to Tab2 and pass my "customer:CustomerDTO" to it.

How can I achieve this?
m1m5dgzv

m1m5dgzv1#

您可以通过几个步骤实现这一点:
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变量并在那里存储数据,而不是两个变量

1qczuiv0

1qczuiv02#

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

fykwrbwg

fykwrbwg3#

你可以在第一个组件中使用@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>();

相关问题