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); } } |
在以上的代码中,我们使用@ViewChild(ChildComponent)注解的形式获取了对应子组件childComponent的实例,这样在父组件类中就可以调用子组件对应的属性及方法了。
相对于本地变量的方式而言,ViewChild的方式更加灵活,用途也比较广泛。但是,需要注意的一点是,必须等待父组件的视图显示完成后才可以使用,因此,ngAfterViewInit 生命周期钩子是非常重要的一步。
8. 服务方式
通过服务依赖注入的方式,我们可以了解到,服务在父子组件之间是可以共享的,因此,我们可以利用共享的服务的形式在父子组件之间进行通信。
如果我们将服务实例的作用域被限制在父组件和其子组件内,这个组件子树之外的组件将无法访问该服务或者与它们通讯。
一般来说,父子之间使用服务的方式来通行,是采用事件消息的形式来实现的。
例如,如下的代码中,父子组件中共享了Service服务,并在各自的类中获取了Service服务的实例,当分别点击父子组件中的按钮时,就能够触发Service服务中的对应的input$以及output$,因为服务是共享的,所以在父子组件中监听对应的服务信息,就能够得到传递的消息。
@Injectable() export class Service { input$: EventEmitter<string> = new EventEmitter<string>(); output$: EventEmitter<string> = new EventEmitter<string>(); constructor() { } } @Component({ selector: 'child', template: ` <button id="out" (click)="click()">click for output</button> ` }) export class ChildComponent { constructor(private _service: Service) { this._service.input$.subscribe(function (input: string) { console.log(input); }) } click() { this._service.output$.emit('i am from child'); } } @Component({ selector: 'parent', template: '<child></child><button id="input" (click)="click()">click for input</button>', providers: [Service] }) export class ParentComponent { constructor(private _service: Service) { this._service.output$.subscribe(function (output: string) { console.log(output); }) } click() { this._service.input$.emit('i am from child'); } } |
转载于:https://www.cnblogs.com/lvjuntao/p/7422439.html
angular2 组件交互相关推荐
- angular2 组件
angular2 组件 首先了解angular2 组件的含义 angular2的应用就是一系列组件的集合 我们需要创建可复用的组件供多个组件重复使用 组件是嵌套的,实际应用中组件是相互嵌套使用的 组件 ...
- Angular 组件交互
Angular 组件交互 组件交互: 组件通讯,让两个或多个组件之间共享信息. 使用场景: 当某个功能在多个组件中被使用到时,可以将该特定的功能封装在一个子组件中,在子组件中处理特定的任务或工作流. ...
- vue父组件、子组件,父子组件交互
Vue父组件调用子组件事件,父子组件交互 vue2 vue父组件向子组件传递数据 or 调用事件 父组件传递数据到子组件 props 传递: <child-c :args="args& ...
- angular 指令渲染_Angular 组件交互 ngOnChanges 监听某一属性值变更
我们在实际项目中会拆分各个功能模块,以便页面复用,避免重复工作.那么,这里就涉及到组件之间的交互问题.例如常使用的,输入型数据绑定.setter截听.ngOnChanges()截听以及通过创建引入服务 ...
- SONiC架构DOCKER组件交互分析
BGP组件交互分析 内核中的bgp socket收到BGP更新报文,然后被上送到bgpd进程 bgpd处理该报文,并通知zebra进程新增前缀和关联下一跳 zebra确定该目的可达后,生成一个路由网络 ...
- Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图. 而除了直接看的见的躯体之外,一个完整的" ...
- Angular2 组件通信
1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...
- angularjs组件间通讯_详解Angular2组件之间如何通信
组件之间的共享可以有好几种方式 父->子 input 方式 import {Component,Input} from 'angular2/core'; @Component({ selecto ...
最新文章
- VS2005创建CLR自定义触发器
- about ajax,About 4nf.org - Arvind Gupta | Ajaxify | The Ajax Plugin
- jop怎么读音英语怎么说_“秀恩爱”英语怎么说?可不是“show love”
- python调用另一个类的返回值_python – 在OpenERP中调用另一个表单的方法返回值
- hivesql优化的深入解析
- juery-轮播图-原理与实现
- Layer2匿名交易协议ZKCHAOS与跨链资产桥ChainSwap合作促进跨链隐私保护
- 台式电脑备用电源_台式电源哪家稳?华硕 TUF GAMING六年质保,坚如磐石_电脑电源...
- java语言的数组描述_下列关于java语言的数组描述中,错误的是( )
- 论文1:《基于FPGA的机器学习硬件加速研究进展》阅读笔记
- matlab中二阶偏导数,matlab中二元函数的一阶和二阶偏导数
- Tensorflow2.5(gpu)+Python3.9+Spyder5的平台搭建
- AndroidTV获取U盘路径
- windows2008 FTP下载“当前的安全设置不允许”的解决方法
- 服务器挂硬盘 BIOS,TaiShan服务器通过BIOS格式化硬盘将硬盘中的残留数据擦除操作方法...
- 超宽带uwb精准定位,厘米级室内定位技术,实时高精度方案应用
- 微信小程序 环形进度条_微信小程序实现圆形进度条实例分享
- IDEA安装教程及插件推荐
- 计算机体系结构在线读,计算机体系结构复习题.ppt
- 【网络是怎么连接的】—— 1.2 向 DNS 服务器查询 Web 服务器的 IP 地址
热门文章
- 如何让 Flutter 应用更好地使用 SVG?
- ​5G行业应用成熟度洞察,哪些场景将率先起飞?|新基建技术洞察之
- linux查看java运行日志,Linux下查看日志用到的经常使用命令
- 制作精良、意犹未尽的异色推理小剧场《Tangle Tower 缠结塔》
- python使用redis第一节、环境配置
- 阿里内部mysql规范40条
- 关于Expdp/Impdp 并行导入导出详细测试结果和并行参数的正确理解!!
- example:利用impdp通过dblink导入数据库
- oracle ORA-14452错误处理
- 总结一些java编程题的思路