文章内容
2019/4/26 10:28:45,作 者: 黄兵
Angular组件核心特性：输入/输出
输入/输出
<product-list
[productList]="products" <!-- input -->
(onProductSelected)="productWasSelected($event)"> <!-- output -->
</product-list>
方括号[]用来传递输入，圆括号()用来处理输出。
数据通过输入绑定流入你的组件，事件通过输出绑定流出你的组件。
方括号传递输入
在Angular中，你可以通过输入把数据传入组件。
<product-list
[productList]="products" <!-- input -->
这就是使用productList组件输入。
[productList] (=号左边)
“products” (=号右边)
左边的[productList]是指：我们希望在product-list组件中设置名为productList的输入。
右边的“products”是指：我们希望将输入设置为products表达式的值。
圆括号处理输出
在Angular中，使用输出来将数据传递出组件。
<product-list
...
(onProductSelected)="productWasSelected($event)"> <!-- output -->
</product-list>
意思是：我们要监听ProductList组件的onProductSelected输出。
也就是说：
(onProdcutSelected)，即=号左边是我们要监听的输出的名称；
“productWasSelected"，即=号右边当有新的输入时我们需要调用的方法。
参考资料：
1、《Angular权威教程》中国工信出版集团，p74
2、用户输入
评论列表