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 相关文章推荐
JS跨域总结
Aug 30 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 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
xml+php动态载入与分页
2006/10/09 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
jquery tools之tooltip
2009/07/25 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python实现C4.5决策树算法
2018/08/29 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
Python类型转换的魔术方法详解
2020/12/23 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
英国鞋网:Rubber Sole
2020/03/03 全球购物
Java基础面试题
2012/11/02 面试题
工伤赔偿协议书范本
2014/04/15 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
基层工作经验证明样本
2014/11/16 职场文书
周年庆典答谢词
2015/01/20 职场文书
余世维讲座观后感
2015/06/11 职场文书
护理工作心得体会
2016/01/22 职场文书
Python实现为PDF去除水印的示例代码
2022/04/03 Python