Angular 5 数据在components之间传递(下) 子组建--->父组建

子组件通过event向父组件传递信息,比父到子的数据传递要稍微复杂一点。

这里我们有子组件cockpit和父组件app,结构如下:cockpit组件中有两个button和两个输入框,点击button后,会把输入框的值传递到app组件的serverElements arry中。


首先,子组件cockpit中双向绑定数据:


然后进行数据传输:

1,连接父子组件,通过在app 的 html中用标签连接:


这里(serverCreated)是app-cockpit组件的一个事件(event),“onServerAdded($event)”是属于 app组件的一个function,这样就把子组件的事件和父组件的function连接起来了。

2,先写父组件app中的onServerAdded($event) 方法:这里的$event是一个javascript对象


3,然后去实现(serverCreated)事件,这个事件是在子组件cockpit中的 :


这里有几个注意点: 1,serverCreated这个事件是一个EventEmitter对象,2,在serverCreated对象前要加@Output()注释,3*,onServerAdded中的变量名要和EventEmitter中泛型的变量名一致(比如都是servername,servercontent)

4,在click button的方法中把这个serverCreated事件发布出去(关联button):


onAddServer()方法是在html中于click绑定的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容