demo

1.demo结构

<inventory-app>
|| //传入数组
<product-list>

|| //进行迭代,并显示
<product-row>

||
每个商品的badage,又可以拆分成图片,部门,价格等组件。

2. 输出属性,@Output装饰器
这个装饰器用于向其它组件发射数据,常配合eventEmitter使用。

在本demo中,组件先声明一个输出属性: @Output onProductSelected:EventEmtter();

然后在构造函数中生成(new)一个发射器:
组件中是通过click()事件函数来发送被选中的product;最后使用onProductSelected.emit(product)发射出去。
然后,在组件的html模板中,
<rec-comp>标签表示是发送数据的目标组件,因为使用的是click方法,因此(click)=’clicked(productChoosed)’
click是一个内置方法,当点击某个元素(row)时。就调用列表组件中的clicked(produtChoosed)方法,发射数据到根组件,
根组件:
<product-list [products]=’products’ (onProductelected)=’productWasSelected($event)’>
<!– 将根组件里的数组传入list组件进行展示 –>
</product-list>

根组件右边的(onProductelected)=’productWasSelected($event)左半部分表示监听onProductSelected发送过来的数据,然后根组件中的productWasSelected方法表示对接受的数据的处理方法。
$event表示被触发事件的参数。

3.<img [src]='{{product.imageUrl}}’

不能直接写<img src=”{{product.imageUrl}”/>,否则图片地址就变成了{{product.imageUrl}},[src]表明使用了img的src标签,表达式解析完成后才会转换成src=“…..”

Leave a Reply

Your email address will not be published. Required fields are marked *