【angular随笔】-组件之间的通讯

父子关系通讯:


1、父组件向子组件传入数据 – @Input


可以看到,我们使用装饰器@Input修饰了count属性,这就意味着child-component被使用时期望收到一个名为count的属性,当然不属于自己掌控的范围内要小心行事,别人使用我们的组件时什么情况都可能出现,所以我们为count设置了一个初始值,当父组件没有给我们的count属性传值时,我们就取此初始值。



2、子组件通知父组件数据已处理完成 – @Output、EventEmitter



3、父组件获取子组件的示例 获取子组件的属性和调用器函数





这里是父组件ContactPage 调用子组件SceneFixedTimeTask的testMonthed 函数


4、子组件获取父组件的示例


@Host() @Inject(forwardRef(()=> EditngAndQueringOfScene)) EditngAndQuering:EditngAndQueringOfScene

EditngAndQueringOfScene为父组件 EditngAndQuering为EditngAndQueringOfScene的示例 EditngAndQuering.SceneObj 为父控件的属性


不是父子组件关系:

1、使用消息服务

场景:需要通信的两个组件不是父子组件或者不是相邻组件;当然,也可以是任意组件。

步骤:

新建一个服务,组件A和组件B同时注入该服务;

组件A从服务获得数据,或者想服务传输数据

组件B从服务获得数据,或者想服务传输数据。


2、使用通知

场景:这里涉及到一个项目,里面需要实现的是所有组件之间都有可能通信,或者是一个组件需要给几个组件通信,且不可通过路由进行传参。

设计方式:

使用RxJs,定义一个服务模块MessageService,所有的信息都注册该服务;

需要发消息的地方,调用该服务的方法;

需要接受信息的地方使用,调用接受信息的方法,获得一个Subscription对象,然后监听信息;

当然,在每一个组件Destory的时候,需要


MessageService:


使用:


全部评论

相关推荐

11-08 16:53
门头沟学院 C++
投票
滑模小马达:第三个如果是qfqc感觉还行,我签的qfkj搞电机的,违约金也很高,但公司感觉还可以,听说之前开过一个试用转正的应届生,仅供参考。
点赞 评论 收藏
分享
无情咸鱼王的秋招日记之薛定谔的Offer:好拒信,偷了,希望有机会用到
点赞 评论 收藏
分享
评论
点赞
收藏
分享
牛客网
牛客企业服务