美文网首页
组件之间的通讯

组件之间的通讯

作者: Gaizka | 来源:发表于2017-11-09 09:46 被阅读13次

    父子关系通讯:


    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:

    使用:

    相关文章

      网友评论

          本文标题:组件之间的通讯

          本文链接:https://www.haomeiwen.com/subject/zxqpmxtx.html