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 相关文章推荐
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
js正则表达式的使用详解
Jul 09 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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
用ODBC的分页显示
2006/10/09 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
理解Python中的类与实例
2015/04/27 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
Jar包的作用是什么
2014/03/30 面试题
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
个人承诺书
2014/03/26 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
文艺委员竞选稿
2015/11/19 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python