Angular2 组件交互实例详解


Posted in Javascript onAugust 24, 2017

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');
}
}

总结

以上所述是小编给大家介绍的Angular2 组件交互实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery中ajax学习笔记一
Oct 16 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 Javascript
canvas多重阴影发光效果实现
Apr 20 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 #jQuery
探究react-native 源码的图片缓存问题
Aug 24 #Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 #Javascript
10个最优秀的Node.js MVC框架
Aug 24 #Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 #Javascript
Vue.js实现价格计算器功能
Mar 30 #Javascript
js微信分享实现代码
Oct 11 #Javascript
You might like
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
ppk谈JavaScript style属性
2008/10/10 Javascript
javascript call和apply方法
2008/11/24 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
js面向对象的写法
2016/02/19 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python实现数值积分方式
2019/11/20 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
numpy库reshape用法详解
2020/04/19 Python
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
工程总经理工作职责
2013/12/09 职场文书
五好关工委申报材料
2014/05/31 职场文书
社区志愿者活动总结
2014/06/26 职场文书
会计个人实习计划书
2014/08/15 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
学雷锋感言
2015/08/03 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers