架构师_程序员_码农网

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 3953|回复: 1

[Angular] Angular 9 系列(八)更新子组件的值通过set触发事件

[复制链接]
发表于 2020-6-17 17:46:48 | 显示全部楼层 |阅读模式
Angular 9 系列(一)动态加载组件
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 系列(二)动态组件传参
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 系列(三)订阅动态组件事件
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 系列(四)自定义 Pipe 管道
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 系列(五)格式化金额货币格式
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 系列(六)调用原生JS变量和方法
https://www.itsvse.com/thread-9254-1-1.html

Angular 9 系列(七)css样式作用域
https://www.itsvse.com/thread-9264-1-1.html

在父子组件传值的过程中,对于子组件给父组件传值时,可以使用EventEmitter发送给父组件,父组件可以在方法中对获得的值进行操作处理。

对于父组件给子组件绑定的值,传过来时是用变量接收的,此时应该使用@Input()的set方法对传入的值进行操作及处理。

首先,我们在点击父组件的“update child component content”按钮,来更新子组件显示的内容,同时打印出来每次更新的内容,效果图如下:

update child component value.gif

子组件 child-page.component.html 代码:


子组件 child-page.component.ts 代码:


父组件 index.component.html 代码:


父组件 index.component.ts 代码:

(完)





上一篇:More than one module matches. Use skip-import option to skip importing...
下一篇:vue+elementui 实现的timeline时间线组件
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
 楼主| 发表于 2024-5-29 16:13:47 | 显示全部楼层
Angular 17 系列(十七)检测 @Input 值的变化
https://www.itsvse.com/thread-10775-1-1.html
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2024-6-18 18:05

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表