【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:
使用: