Angular2 组件通信
1. 组件通信
我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间的交互方式主要有如下几种:
l 使用输入型绑定,把数据从父组件传到子组件
l 通过 setter 拦截输入属性值的变化
l 使用 ngOnChanges 拦截输入属性值的变化
l 父组件监听子组件的事件
l 父组件与子组件通过本地变量互动
l 父组件调用 ViewChild
l 父组件和子组件通过服务来通讯
本文会通过讲解着几种方式来对组件之间的通信做一个大致的介绍。
2. 输入型绑定
输入型绑定指的是利用模板语法中的属性型绑定方式,将父组件的数据传递到子组件对应的对象中,子组件中的对象一般使用@Input装饰器来修饰,作为数据的接受者,例如
@Component({ selector: 'child', template: 'I am fron {{input}}' }) export class ChildComponent implements OnInit { @Input() input; constructor() { } ngOnInit() { } } @Component({ selector: 'parent', template: '<child [input]="data"></child>' }) export class ParentComponent implements OnInit { data: string; constructor() { } ngOnInit() { this.data = "parent"; } } |
以上的例子我们可以看出,存在父子两个组件,在父组件ParentComponent中的模板中引入了<child [input]="data"></child>子组件,并将data数据通过属性绑定的方式绑定到input属性中传入到子组件中,子组件中通过@Input()注解修饰input属性来接收传入的数据,并显示在模板I am fron {{input}}中。
输入型绑定是从父组件传递数据到子组件最常见的方式。
3. setter监听
我们知道,Angular2是一个MVVM的框架,当数据发生变化时能够同步显示到模板视图中,可以使用一个输入属性的 setter 函数,以拦截父组件中值的变化,并采取行动。例如,我们改造上面的例子,子组件中使用set,get重写对应的绑定input属性,当输入值方式变化时输出一个控制台信息。
@Component({ selector: 'child', template: 'I am fron {{data}}' }) export class ChildComponent implements OnInit { _input:string; @Input() public set input(v : string) { this._input = v; console.log(v); } public get input() : string { return this._input; } constructor() { } ngOnInit() { } } |
4. ngOnChanges
除了上面说的setter函数可以响应输入数据的变化外,Angular2还提供了一个生命周期函数ngOnChanges 可以监听数据的变化。使用 OnChanges 生命周期钩子接口的 ngOnChanges 方法来监测输入属性值的变化并做出回应。我们改造以上的子组件来响应对应的变化,在这个示例中,我们监听了输入数据的变化,采取的对应动作仅仅是输出对应的信息,当然你也可以做很多其他的事情。
@Component({ selector: 'child', template: 'I am fron {{data}}' }) export class ChildComponent implements OnInit, OnChanges { _input: string; @Input() public set input(v: string) { this._input = v; console.log(v); } public get input(): string { return this._input; } constructor() { } ngOnInit() { } ngOnChanges(changes: SimpleChanges) { console.log(changes); } } |
5. 事件传播
上面的集中方式都是父组件如何向子组件传递数据以及子组件如何监听数据的变化,事件传播则是子组件如何向父组件通信的一种方式。子组件暴露一个 EventEmitter 属性,当事件发生时,子组件利用该属性 emits( 向上弹射 ) 事件。父组件绑定到这个事件属性,并在事件发生时作出回应。子组件的 EventEmitter 属性是一个 输出属性 ,通常带有 @Output 装饰器 。
@Component({ selector: 'child', template: ` I am fron {{data}}<br /> <button id="out" (click)="click()">click for out</button> ` }) export class ChildComponent implements OnInit, OnChanges { _input: string; @Input() public set input(v: string) { this._input = v; console.log(v); } public get input(): string { return this._input; } @Output() output:EventEmitter<string> = new EventEmitter<string>(); click(){ this.output.emit("i am from child"); } constructor() { } ngOnInit() { } ngOnChanges(changes: SimpleChanges) { console.log(changes); } } @Component({ selector: 'parent', template: '<child [input]="data" (output)="output($event)"></child>' }) export class ParentComponent implements OnInit { data: string; constructor() { } ngOnInit() { this.data = "parent"; } output($event){ console.log($event); } } |
在上面的例子中,我们在子组件ChildComponent添加了一个向外传播的事件output:EventEmitter<string> = new EventEmitter<string>(),并添加了一个点击的按钮,当按钮事件触发时,就会调用output事件向父组件传递事件,并将数据作为参数传递到父组件ParentComponent中,同时在父组件ParentComponent的模板<child [input]="data" (output)="output($event)"></child>中可以看到,我们使用模板语法中的事件绑定,绑定了output函数作为对应事件的接受函数,当子组件output事件触发是,父组件的函数就会得到执行。
使用事件传播来进行子组件对父组件之间的通信是最常见的方式。
6. 本地变量
在模板语法中,我们知道存在着本地变量这种语法,可以使用本地变量来代表对应的组件。虽然父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里,新建一个本地变量来代表子组件,然后利用这个变量来读取子组件的属性和调用子组件的方法,不过这种使用方式只能在模板中使用,例如如下所示,改写上面例子中的父组件模板,代码如下。
我们在ParentComponent组件中使用本地变量#child获取了child组件的实例,这样就可以在模板中使用其属性或者方法,例如child.input。
@Component({ selector: 'parent', template: '<child [input]="data" (output)="output($event)" #child></child>{{child.input}}' }) export class ParentComponent implements OnInit { data: string; constructor() { } ngOnInit() { this.data = "parent"; } output($event){ console.log($event); } } |
7. ViewChild
本地变量的方式是在父组件的模板中获取子组件的实例,有木有其他方式可以在组件的类中获取子组件的实例呢?答案是肯定的,如果父组件的类需要读取子组件的属性值或调用子组件的方法,就不能使用本地变量方法。当父组件类 需要这种访问时,可以把子组件作为ViewChild,注入到父组件里面。例如,我们改造上面的父组件的组件类,使用ViewChild来获取子组件的实例,代码如下:
@Component({ selector: 'parent', template: '<child [input]="data" (output)="output($event)" #child></child>{{child.input}}' }) export class ParentComponent implements OnInit { @ViewChild(ChildComponent) private childComponent: ChildComponent; data: string; constructor() { } ngOnInit() { this.data = "parent"; } output($event) { console.log($event); } } |
转载于:https://www.cnblogs.com/hedengyao/p/6714310.html
Angular2 组件通信相关推荐
- angular2 组件交互
1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...
- Vue 组件通信之 Bus
关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基 ...
- React组件通信技巧
效果图 communication.gif 点击查看Github完整源码 1.父向子通信 直接标签中插入参数即可 //number只是个例子 let _number = this.state.numb ...
- angularjs1访问子组件_vue 组件通信看这篇就够了(12种通信方式)
vue 组件间的通信是 vue 开发中很基础也十分重要的部分,作为使用 vue 的开发者每天都在使用.同时,vue 通信也是面试中非常高频的问题,有很多面试题,都是围绕通信展开. 本文会介绍常见的通信 ...
- 子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
- 组件通信 eventtBus
平级组件的通信 一个全局发布订阅模式,它是挂载到全局的 <!DOCTYPE html> <html lang="en"> <head><m ...
- 组件通信 $ref
(1)放在dom上表示获取当前dom元素, (2)放到组件上表示获取当前组件实例 (3)在v-for中获取的是集合 <!DOCTYPE html> <html lang=" ...
- 关于vue2.0组件通信
1.父组件通过props属性给子组件通信 //父组件 <template> <child :show="is_showshare" :age="age& ...
- 「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩 源码在文末. 前言 上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
最新文章
- oracle 11gr2 单机数据库使用asm,RHEL7上安装11gR2单机使用ASM存储搭建Physical Standby笔记...
- tensorflow 测试
- mac下git与github简单使用
- Buffer的基本的原理
- mysql实用管理器添加外键_MySQL 添加外键
- 2020年视频号发展白皮书
- 如今在农村做生意,为啥越来越难了?
- 我的第一个全栈 Web 应用程序
- 演出节目名字_华晨宇——让我看娱乐节目看到感动
- 战神背光键盘如何关系_神舟战神K660E-i7D8红色背光键盘,深夜战火不熄!
- Linux服务器的显卡驱动丢失又装上的过程
- sql lab 爆库 心得
- 凤凰刷机找不到手机设备的解决方法
- 《Linux设备驱动开发详解(第3版)》(即《Linux设备驱动开发详解:基于最新的Linux 4.0内核》)前言
- 如何下载高分辨率卫星影像
- 软件是指示计算机运行所需的程序,计算机基础知识A.ppt
- Word删除全文图片
- 微信小程序真机调试功能失常
- 查看linux版本是多少位
- 利用python预测交通拥堵_Python可视化轻松展示交通拥堵情况
热门文章
- [转载] New Concept English 1——Lesson 14 What colour's your…?
- lftp 4.4.0 发布,命令行的FTP工具
- [4月21日]《51CTO 编辑部的外传》——剧本篇(上)
- SharePoint 2007部署过程详细图解之一:准备
- 如何在asp.net mvc3中使用HttpStatusCode
- InstallShield打包设置相对路径
- JS解决在提交form表单时某个值不存在 alter弹窗点确定不刷新界面
- 最大连续子序列和-动态规划
- android中Textview 和图片同时显示时,文字省略号显示,图片自动靠到右边
- asp.net request编码问题,(转载)