angularjs组件间通讯_angular组件间通讯的实现方法示例
前言
一个angular应用一般情况下包含多个组件,而且要让组件互相之间能进行通讯(数据传送),这样才能构成一个有机的完整系统。
1、情景引入
下面例举一个实际遇到的情况:
上图页面包含两个组件,“新增班级组件”和“选择教师组件”,在新增班级时需要选择改班级的管理教师,管理教师列表要从数据库中获取。选择好教师后,“选择教师组件”要把选择的教师对象传递回“新增班级组件”,这其中涉及到对象传递称为通讯。
2、组件关系
组件之间有几种典型的关系:父子关系、兄弟关系、没有直接关系
父子关系说明:有a、b两个组件(不一定在同一个模块),如果a组件的view页面中引用了b的selector标签,则称a为b的父组件,或b为a的子组件。
3、通讯方案
了解完组件存在的关系,相应地,组件之间有以下几种典型的通讯方案:
直接的父子关系:父组件直接访问子组件的 public 属性和方法
直接的父子关系:借助于 @input 和 @output 进行通讯
没有直接关系:借助于 service 单例进行通讯
利用 cookie 和 localstorage 进行通讯
利用 session 进行通讯
直接调用
假设bcomponent是acomponent的子组件。
对于有直接父子关系的组件,父组件可以直接访问子组件里面 public 型的属性和方法,示例代码片段如下:
调用子组件方法
显然,子组件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 这个参数(这个参数可以是个父组件想要传给子组件的变量或对象等):
前面是父组件->子组件传递数据,过程相对简单,下面是子组件->父组件传数据,过程较复杂。
@output 的本质是事件机制,我们可以利用它来监听子组件上派发的事件,子组件上这样写:
@output()
public selected=new eventemitter();
eventemitter:在angular中组件通过定义eventemitter 事件弹射器的方式由子组件向父组件发送数据。
selected是一个事件,触发 selected 事件的方式如下:
this.selected.emit(对象);
在子组件上定义一个方法onchange(),使子组件view能够调用该方法触发 selected 事件:
onchange() {
this.selected.emit(要传给父组件的对象);
}
父组件可以这样监听selected事件:
➊ 使用我们刚刚在子组件中定义的@output() selected
① 方法名需要在父组件c层中定义,用于接收子组件传过来的事件,而参数名可以随性起,但我们一般为起名为$event以示此处为该组件的一个弹射器。
总结
到此这篇关于angular组件间通讯的文章就介绍到这了,更多相关angular组件间通讯内容请搜索萬仟网以前的文章或继续浏览下面的相关文章希望大家以后多多支持萬仟网!
希望与广大网友互动??
点此进行留言吧!
angularjs组件间通讯_angular组件间通讯的实现方法示例相关推荐
- Vue3(撩课学院)笔记02-创建组件,全局组件,局部组件,父子组件,组件标签化,组件的data数据共享,组件间通讯,props,父传子$ref,子传父$parent
1.创建一个组件 首先要创建一个根组件进行挂载 再创建一个子组件,完成子组件的逻辑 子组件主要使用template模板来完成布局和逻辑 把子组件通过根组件.component的方法挂载到根组件上 &l ...
- 中国人工智能学会通讯——机器人组件技术在智能制造系统中的应用
摘要:随着工业4.0时代的到来,如何将传统工厂改造成为个性化.网络化.柔性生产的智能制造系统成为了当前的研究热点.本文从智能制造系统和智能机器人系统的相似性出发,构建了基于机器人组件技术的智能制造系统 ...
- android 组件化_你曾遇到的某大厂奇葩问题:Android组件化开发,组件间的Activity页面跳转...
组件化开发有什么好处? 1.当项目越来越大时,app的业务越来越复杂,会出现业务功能复杂混乱,各功能块.页面相互依赖,相互调用太多导致耦合度高,而采用组件化开发,我们就可以将功能模块合理的划分,降低功 ...
- React(04):React中的组件化及父子组件间的传值取值
前言 接着前一篇继续学习React组件化 React(03):React中的JSX语法 正文 什么是组件化: 是从 UI 界面视图的角度 来进行分析的:把一些可复用的UI元素,抽离为单独的组件:便于项 ...
- 容器间通信_Vue组件间通信的6种方式,前端工程师人人都会,网友:太简单了...
Vue 组件间通信只要指以下 3 类通信:父子组件通信.隔代组件通信.兄弟组件通信,下面分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信. (1)props / $emit 适用 父子组件通 ...
- 【Android 组件化】路由组件 ( 组件间共享的服务 )
文章目录 一.组件间共享的服务 二.注解处理器添加对上述 " 组件间共享的服务 " 的支持 三.注解处理器 生成代码规则 四.完整注解处理器代码 及 生成的 Java 代码 1.注 ...
- 简单教你React父子组件间平级组件间传值
国庆充电特辑: 堵车堵死,废话不多说直接上菜. 1.父组件对子组件传值 利用props属性传值 class Component extends React.Component {constructor ...
- 微信小程序(组件:路由、表单、媒体、自定义组件,插槽、组件通讯、侦听器、生命周期)
三.微信小程序组件 组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件 组件是视图层的基本组成单元. 组件自带一 ...
- Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现 组件化即是对某些可以进行复用的功能进行封装的标准化工作 标准:要想组件能够成功组合在一起,每个组件必须要有标准 分治:将不同的功能封装到不同的组件 ...
最新文章
- 一文读懂你该了解的5G知识:现在别买5G手机
- oracle往据,指定日期查询数Oracle据库
- docker and ssh issues
- Mysql:is not allowed to connect to this MySQL
- CCF 201809-1 买菜
- 现实生活中我们常常遭遇“怀疑”
- 【软件测试】软件测试分类详述
- Eclipse调整tomcat内存大小
- python输入时间限制_用Python计算用户输入时间
- 2000条你应知的WPF小姿势 基础篇57-62 依赖属性进阶
- lol韩服游戏内设置_lol韩服设置对照
- RGB色彩模型图像/像素深度
- python图像分割算法_用python实现随机森林图像分割
- 如何带领小微企业在软件开发行业生存
- 2021年第十二届蓝桥杯模拟赛(第四期)题目和解析
- 网站关键词排名到前3名SEO技巧
- 华为云面试指南—FusionAccess
- 统计一篇英文文章单词个数
- CTR预估模型的进化之路
- Hue(01)——Hue概述
热门文章
- 3位格雷码的顺序编码_第3部分-计算机程序员(FPGA嵌入式应用)_3级_理论知识复习题...
- 搭建Sql Server AlwaysOn 视频教程
- 04号团队-团队任务3:每日立会(2018-12-04)
- [PYTHON] 深度解析copy.copy() 与 copy.deepcopy()
- remoting例子
- FreeRTOS基础以及UIP之协程--C语言剑走偏锋
- JAVA Map 和 List 排序方法
- 利用SuppressMessage来阻止FxCop进行代码分析时报出的警告
- 递归下降分析法的基本思想。_还不懂这八大算法思想,刷再多题也白搭!
- 理清逻辑,确保云原生时代应用开发的全生命周期安全