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 相关文章推荐
json2.js的初步学习与了解
Oct 06 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
JSON相关知识汇总
Jul 03 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 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 json_encode值中大括号与花括号区别
2013/09/30 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
一些mootools的学习资源
2010/02/07 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
js控制input输入字符解析
2013/12/27 Javascript
js动态切换图片的方法
2015/01/20 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
iview实现图片上传功能
2020/06/29 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
python的几种开发工具介绍
2007/03/07 Python
python pdb调试方法分享
2014/01/21 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
pymysql 开启调试模式的实现
2019/09/24 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
军训心得体会
2013/12/31 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
生死抉择观后感
2015/06/09 职场文书
大学生支教感言
2015/08/01 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers