首页 > 其他 > 详细

Angular中父子组件双向绑定传值

时间:2018-11-29 11:59:28      阅读:249      评论:0      收藏:0      [点我收藏+]

下面为大家展示一个较为简单的ng父子组件双向绑定传值,下面是父组件页面

技术分享图片

这个页面的大概功能就是父组件(红色)通过输入框输入内容反映到子组件上进行展示,并且进行了投影,

子组件(橙黄色)通过Input输入框输入内容反映到父组件上,并且使用了@Output传值给父组件

下面是父组件的页面

技术分享图片

父组件ts

技术分享图片

子组件页面

技术分享图片

子组件ts

技术分享图片

我主要来说下需要注意的几个地方,第一个就是当我利用子组件的@Output发射数据给父组件的时候,

import { EventEmitter } from ‘@angular/core‘;

 EventEmitter 的导入需要注意,同时子组件需要用@Output发射给父组件的ziChange的zi后面必须是Change,

这样才可以在父组件页面使用[()]这种绑定绑定方式,否则还需要自己写个方法接收。建议大家尽量避免使用

@ViewChild这种的方式获取子组件的方法和值。

Angular中父子组件双向绑定传值

原文:https://www.cnblogs.com/wlynobug/p/10037158.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!