angular组件间通讯的实现方法示例


Posted in Javascript onMay 07, 2020

前言

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

1、情景引入

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

angular组件间通讯的实现方法示例

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

2、组件关系

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

angular组件间通讯的实现方法示例

父子关系说明:有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>

显然,子组件B里面必须暴露一个 public 型的 childFunction 方法,就像这样:

public childFunction():void{ console.log("子组件的名字是"); }

以上是通过在模板里面定义局部变量的方式来直接调用子组件里面的 public 型方法。在父组件的内部也可以访问到子组件的实例,需要利用到 @ViewChild 注解,示例如下:

@ViewChild(BComponent)
private bComponent: BComponent;

如果通过 @ViewChild 注解,父组件直接访问子组件,那么两个组件之间的关系就被固定死了。父子两个组件紧密依赖,谁也离不开谁,不能单独使用了。尽量避免这样做。

@Input 和 @Output

同样假设BComponent是AComponent的子组件。

我们可以利用 @Input 装饰器,让父组件直接给子组件传递参数,子组件BComponent上这样写:

@Input() 
public title:string;

父组件view上可以这样设置 title 这个参数(这个参数可以是个父组件想要传给子组件的变量或对象等):

<B title="Hello Angular"></B>

前面是父组件->子组件传递数据,过程相对简单,下面是子组件->父组件传数据,过程较复杂。

@Output 的本质是事件机制,我们可以利用它来监听子组件上派发的事件,子组件上这样写:

@Output() 
public selected=new EventEmitter<要传给父组件的对象类型>();

EventEmitter:在angular中组件通过定义EventEmitter 事件弹射器的方式由子组件向父组件发送数据。

selected是一个事件,触发 selected 事件的方式如下:

this.selected.emit(对象);

在子组件上定义一个方法onChange(),使子组件view能够调用该方法触发 selected 事件:

onChange() { 
 this.selected.emit(要传给父组件的对象); 
}

父组件可以这样监听selected事件:

<B (selected)➊="onTeacherSelected($event)①"></B>

➊ 使用我们刚刚在子组件中定义的@Output() selected

① 方法名需要在父组件C层中定义,用于接收子组件传过来的事件,而参数名可以随性起,但我们一般为起名为$event以示此处为该组件的一个弹射器。

总结

到此这篇关于angular组件间通讯的文章就介绍到这了,更多相关angular组件间通讯内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
深入理解js中的加载事件
Feb 08 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
VSCode搭建React Native环境
May 07 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 #Javascript
Vue双向绑定实现原理与方法详解
May 07 #Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 #Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 #Javascript
简单了解JavaScript弹窗实现代码
May 07 #Javascript
angular组件间传值测试的方法详解
May 07 #Javascript
Node.js API详解之 timer模块用法实例分析
May 07 #Javascript
You might like
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python实现的批量下载RFC文档
2015/03/10 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
Python unittest框架操作实例解析
2020/04/13 Python
暇步士官网:Hush Puppies
2016/09/22 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
法语专业求职信
2014/07/20 职场文书
农业项目建议书
2014/08/25 职场文书
迎七一演讲稿
2014/09/12 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
干部理论学习心得体会
2016/01/21 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技