angular组件互传

最新推荐文章于 2024-09-23 11:26:04 发布

看点博客

最新推荐文章于 2024-09-23 11:26:04 发布

阅读量607

点赞数

分类专栏：前端文章标签： angular.js

本文链接：https://blog.csdn.net/hzqzzz/article/details/123690591

版权

前端专栏收录该内容

29 篇文章 4 订阅

订阅专栏

已有two和three两个组件，以app.component.html为父组件

1.父传子

以下将app.component.html成为home页面

在home页面中，我定义了一个输入框和显示输入内容
home页面：
在这里插入图片描述

two组件中显示父组件传递的值
在这里插入图片描述

首先在home页面中使用子组件
在这里插入图片描述

思路是：
1.将父组件动态绑定的childVal，通过[childVal]的形式先传值给子组件；
2.在子组件中引入 Input

引入Input
在这里插入图片描述

3.接收父组件绑定的值，并且在ngOnchanges中，将其赋值给子组件中绑定的属性名

在这里插入图片描述

在这里插入图片描述
效果：

1.子传父

在two组件中添加一个输入框
在这里插入图片描述

1.将输入框绑定new_childVal值
2.添加input输入事件
3.引入Output

引入Output
在这里插入图片描述

4.定义抛出方法

在这里插入图片描述
changeChildVal 是自己定义的抛出方法名

5.输入框的input事件方法触发，使用emit实时发送数据出去

在这里插入图片描述

6.回到home页面，使用抛出的方法获取two组件的值

在这里插入图片描述
这里要注意的是需要在方法中加入参数$event

7.在home.ts中使用相应方法，将获取two组件的值重新给home页面绑定的值

在这里插入图片描述
这样就形成了一个互通

效果：
在这里插入图片描述

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
琢磨了一下，添加了一个three组件
如图：
在这里插入图片描述

我想实现的效果是：
1.在two组件中引入three组件；
2.three能接受home页面和two组件的值，并且随着值的变化而变化
3.home页面和two组件的值也能随着three组件的值变化

我实现了，思路是一样的
1.在two引入three组件，将two绑定的值赋值给three
2.在three中接受到two的值
3.在ngOnChanges中将获取到的two的值赋给three
4.定义抛出方法，输入触发该方法进行抛出
5.two接收three的抛出方法
6.触发接收方法，将获取的值赋值给two绑定的值，并且触发two向home页面发生数据的抛出方法

two：
在这里插入图片描述
最后效果：