我有2个组件,名为 list
(i,e人员列表)和 details
(我,e人员详细信息),我显示如下:
Here my requirements is: 在为ex:Person 1选择特定的 list-item
时,我想在 details
组件上显示 Person 1
详细信息,该组件出现在右侧,如下所示:
如何在 list
组件中为单个 list-item
(i,e Person 1,Person 2 ....)分配值并将它们传递给 details
组件以显示如第二张图像所示 . 我看到了一些示例但它们与我的不匹配需求 .
3 回答
有几种方法可以在不同的组件之间进行通信 . 在您的情况下,您可以使用服务进行通信 .
工作演示在这里 - https://stackblitz.com/edit/list-examples-nh4hik
person.service.ts
这是将在一个组件与另一个组件之间进行通信的服务 .
列表组件
DetailsComponent
您可以使用
BehaviorSubject
来实现这一目标 .声明这样的服务:
将服务注入
listComponent
添加一个触发BehaviorSubject的函数:
Note :在这个例子中,我假设当你点击一个元素时,它会触发这个函数 . 让我们假设您的HTML是这样的:
在
detailsComponent
中捕获BehaviorSubject的结果(首先注入服务):然后在.html中,你可以这样:
Stackblitz:https://stackblitz.com/edit/angular-d64vtt
基于组件输入/输出的不同方法:
将onSelectionChange添加到材料列表:
将输出添加到列表组件:
在personSelected调用onPersonSelect发出:
在app组件中添加监听器到列表组件:
并将其添加到列表中:
最后将选定人员传递给扣留组件:
接受详细信息组件中的输入参数并执行您想要的操作:
在模板中