文章内容
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、用户输入
评论列表