如何实现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 型的属性和方法，示例代码片段如下：

<B #child></B> 
<button (click)="child.childFunction()">调用子组件方法</button>

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

本文题目：如何实现angular组件间通讯-创新互联
当前网址：https://www.cdcxhl.com/article42/csgdhc.html

成都网站建设公司_创新互联，为您提供ChatGPT、电子商务、微信公众号、Google、App开发、定制开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联