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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
node.js基础知识小结
Feb 26 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 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数组应用之比较两个时间的相减排序
2008/08/18 PHP
js 单引号 传递方法
2009/06/22 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
浅析vue数据绑定
2017/01/17 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
python中set常用操作汇总
2016/06/30 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
如何用Python合并lmdb文件
2018/07/02 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
2014年实习生工作总结
2014/11/27 职场文书
销售助理岗位职责
2015/02/11 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
工商行政处罚决定书
2015/06/24 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
小学语文国培研修日志
2015/11/13 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
一文搞懂MySQL索引页结构
2022/02/28 MySQL