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 相关文章推荐
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 Javascript
vue实现标签云效果的示例
Nov 09 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
Element-ui upload上传文件限制的解决方法
Jan 22 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
php服务器的系统详解
2019/10/12 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Python编写打字训练小程序
2019/09/26 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
电子商务网站的创业计划书
2014/01/05 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
Redis入门教程详解
2021/08/30 Redis
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript