.jpg?table=collection&id=e0aa5e66-74d7-4301-9291-580a661bf93e&t=e0aa5e66-74d7-4301-9291-580a661bf93e&width=1080&cache=v2){kind=logo}
准备组件
用
item-list.component.ts 为父组件，和 item.component.ts 为子组件。建立父组件item-list
父组件
item-list用来显示物品列表，而物品列表的内容item作为子组件用来显示物品以及其内容。模板用
*ngFor显示物品信息。[item]="item"是用来绑定item.component.ts内的item。建立子组件item
使用 @Input 和 @Output 装饰器
@Input : 在子组件中接收从父组件传来的数据。在
item.component.html, 可以用调用 item。@Output : 与 EventEmmitter 搭配，从子组件传送数据到父组件。先导入
Output和EventEmitter。在这里，我也是把选择的item输出到父组件里。在模板中，把
(click)和onSelect()绑定起来。这时，点击该物品时，就会把该item传送到item.component.ts中。在父组件
item.component.ts创建selectedItems用来保存被点击过的item。现在，我们来稍微修改
<app-item>内的代码。把子组件的的selectEvent和父组件的onSelect()绑定在一起。现在我们需要看到
selectedItems的输出，较简单的方法是在item-list.component.ts的onSelect()增加多一行console.log(selectedItems);。打开浏览器的developer tools就可以看到selectedItems的elements了。小结
基本上到这里就可以知道如何在组件之间传送数据。
- 在子组件内使用
@Input接收从父组件传送来的数据。
- 使用
EventEmitter来定义event，并把event和父组件的函数绑在一起。
- 使用
@Output，通过EventEmitter把数据传送去父组件。
显示从子组件传送来的数据
这时你可以建立另一个子组件来显示
selectedItems的内容，但是我只是要显示内容而已，没有要添加其他的功能，也没有日后维护的需求，所以我只是在父组件item.component.html添加一个table来显示已选择的物品，还有把已选择物品的价格加起来。首先，定义
totalPrice。在onSelect()的函数内把item.price加起来。在模板中加入
table代码。加入小小的CSS点缀，点开查看CSS代码
最终效果
- 作者:jiez
- 链接:https://blog.jiezcloud.com/article/af9823a9-f9e6-42e0-95f7-f5d2437c6b62
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
