我的组件结构
客户-物料页签
- 包含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?
3条答案
按热度按时间m1m5dgzv1#
您可以通过几个步骤实现这一点:
1.使用以下命令创建服务:
1.在服务中定义两个变量,用于保存每个组件的数据:
1.在组件中使用服务:
1.将每个组件数据存储在相对变量中:
1.在选项卡中使用所需的每个数据
你也可以定义一个
data
变量并在那里存储数据,而不是两个变量1qczuiv02#
要将数据传递给组件,您可以使用服务或使用属性绑定和事件绑定语法,如下所示:
在tab1中,使用
EventEmitter
。一旦用户点击edit,调用emit
函数并传递所需的数据。使用事件绑定,检索父组件中的数据,并通过属性绑定将其传递给子组件。
点击这里:https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/
要切换tab,请使用
@ViewChild
装饰器将<mat-tab-group>
注入component.ts中,并更改其selectedIndex
属性。fykwrbwg3#
你可以在第一个组件中使用@Output-->在变量中存储值你可以在第二个组件中使用@Input并传递上面的变量
代码如下所示: