如何实现angular组件间通讯-创新互联

小编这次要给大家分享的是如何实现angular组件间通讯，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

前言

一个Angular应用一般情况下包含多个组件，而且要让组件互相之间能进行通讯（数据传送），这样才能构成一个有机的完整系统。

1、情景引入

下面例举一个实际遇到的情况：

上图页面包含两个组件，“新增班级组件”和“选择教师组件”，在新增班级时需要选择改班级的管理教师，管理教师列表要从数据库中获取。选择好教师后，“选择教师组件”要把选择的教师对象传递回“新增班级组件”，这其中涉及到对象传递称为通讯。

2、组件关系

组件之间有几种典型的关系：父子关系、兄弟关系、没有直接关系

父子关系说明：有A、B两个组件（不一定在同一个模块），如果A组件的view页面中引用了B的selector标签，则称A为B的父组件，或B为A的子组件。

3、通讯方案

了解完组件存在的关系，相应地，组件之间有以下几种典型的通讯方案：

• 直接的父子关系：父组件直接访问子组件的 public 属性和方法
• 直接的父子关系：借助于 @Input 和 @Output 进行通讯
• 没有直接关系：借助于 Service 单例进行通讯
• 利用 cookie 和 localstorage 进行通讯
• 利用 session 进行通讯
   

直接调用

假设BComponent是AComponent的子组件。

对于有直接父子关系的组件，父组件可以直接访问子组件里面 public 型的属性和方法，示例代码片段如下：

 
调用子组件方法

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。