Angular2 组件交互实例详解

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了Angular2 组件交互实例详解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_4030@

1. 组件通信


@H4030@我们知道Angular2应用程序实际上是有很多父子组价组成的组件树，因此，了解组件之间如何通信，特别是父子组件之间，对编写Angular2应用程序具有十分重要的意义，通常来讲，组件之间的交互方式主要有如下几种：


@H4030@l 使用输入型绑定，把数据从父组件传到子组件


@H403_0@l 通过 setter 拦截输入属性值的变化


@H_403_0@l 使用 ngOnChanges 拦截输入属性值的变化


@H_4030@l 父组件监听子组件的事件


@H4030@l 父组件与子组件通过本地变量互动


@H403_0@l 父组件调用 ViewChild


@H_4030@l 父组件和子组件通过服务来通讯


@H4030@本文会通过讲解着几种方式来对组件之间的通信做一个大致的介绍。


@H4030@

2. 输入型绑定


@H403_0@输入型绑定指的是利用模板语法中的属性型绑定方式，将父组件的数据传递到子组件对应的对象中，子组件中的对象一般使用@Input装饰器来修饰，作为数据的接受者，例如


<div class="jb51code">
<pre class="brush:js;">
@Component({
selector: 'child',template: 'I am fron {{input}}'
})
export class ChildComponent implements OnInit {
@Input()
input;
constructor() { }
ngOnInit() { }
}
@Component({
selector: 'parent',template: '<child [input]="data">'
})
export class ParentComponent implements OnInit {
data: string;
constructor() { }
ngOnInit() {
this.data = "parent";
}
}

@H_403_0@以上的例子我们可以看出，存在父子两个组件，在父组件ParentComponent中的模板中引入了子组件，并将data数据通过属性绑定的方式绑定到input属性中传入到子组件中，子组件中通过@Input()注解修饰input属性来接收传入的数据，并显示在模板I am fron {{input}}中。

@H_403_0@输入型绑定是从父组件传递数据到子组件最常见的方式。

@H_403_0@

3. setter监听

@H_403_0@我们知道，Angular2是一个MVVM的框架，当数据发生变化时能够同步显示到模板视图中，可以使用一个输入属性的 setter 函数，以拦截父组件中值的变化，并采取行动。例如，我们改造上面的例子，子组件中使用set，get重写对应的绑定input属性，当输入值方式变化时输出一个控制台信息。

@H_403_0@

4. ngOnChanges

@H_403_0@除了上面说的setter函数可以响应输入数据的变化外，Angular2还提供了一个生命周期函数ngOnChanges 可以监听数据的变化。使用 OnChanges 生命周期钩子接口的 ngOnChanges 方法来监测输入属性值的变化并做出回应。我们改造以上的子组件来响应对应的变化，在这个示例中，我们监听了输入数据的变化，采取的对应动作仅仅是输出对应的信息，当然你也可以做很多其他的事情。

@H_403_0@

5. 事件传播

@H_403_0@上面的集中方式都是父组件如何向子组件传递数据以及子组件如何监听数据的变化，事件传播则是子组件如何向父组件通信的一种方式。子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits( 向上弹射 ) 事件。父组件绑定到这个事件属性，并在事件发生时作出回应。子组件的 EventEmitter 属性是一个 输出属性 ，通常带有 @Output 装饰器 。

@H_403_0@在上面的例子中，我们在子组件ChildComponent添加了一个向外传播的事件output:EventEmitter = new EventEmitter>()，并添加了一个点击的按钮，当按钮事件触发时，就会调用output事件向父组件传递事件，并将数据作为参数传递到父组件ParentComponent中，同时在父组件ParentComponent的模板中可以看到，我们使用模板语法中的事件绑定，绑定了output函数作为对应事件的接受函数，当子组件output事件触发是，父组件的函数就会得到执行。

@H_403_0@使用事件传播来进行子组件对父组件之间的通信是最常见的方式。

@H_403_0@

6. 本地变量

@H_403_0@在模板语法中，我们知道存在着本地变量这种语法，可以使用本地变量来代表对应的组件。虽然父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法，不过这种使用方式只能在模板中使用，例如如下所示，改写上面例子中的父组件模板，代码如下。

@H_403_0@我们在ParentComponent组件中使用本地变量#child获取了child组件的实例，这样就可以在模板中使用其属性或者方法，例如child.input。

{{child.input}}' }) export class ParentComponent implements OnInit { data: string; constructor() { } ngOnInit() { this.data = "parent"; } output($event){ console.log($event); } }
@H_403_0@

7. ViewChild

@H_403_0@本地变量的方式是在父组件的模板中获取子组件的实例，有木有其他方式可以在组件的类中获取子组件的实例呢？答案是肯定的，如果父组件的类需要读取子组件的属性值或调用子组件的方法，就不能使用本地变量方法。当父组件类 需要这种访问时，可以把子组件作为ViewChild，注入到父组件里面。例如，我们改造上面的父组件的组件类，使用ViewChild来获取子组件的实例，代码如下：

{{child.input}}' }) export class ParentComponent implements OnInit { @ViewChild(ChildComponent) private childComponent: ChildComponent; data: string; constructor() { } ngOnInit() { this.data = "parent"; } output($event) { console.log($event); } }
@H_403_0@在以上的代码中，我们使用@ViewChild(ChildComponent)注解的形式获取了对应子组件childComponent的实例，这样在父组件类中就可以调用子组件对应的属性及方法了。

@H_403_0@相对于本地变量的方式而言，ViewChild的方式更加灵活，用途也比较广泛。但是，需要注意的一点是，必须等待父组件的视图显示完成后才可以使用，因此，ngAfterViewInit 生命周期钩子是非常重要的一步。

@H_403_0@

8. 服务方式

@H_403_0@通过服务依赖注入的方式，我们可以了解到，服务在父子组件之间是可以共享的，因此，我们可以利用共享的服务的形式在父子组件之间进行通信。

@H_403_0@如果我们将服务实例的作用域被限制在父组件和其子组件内，这个组件子树之外的组件将无法访问该服务或者与它们通讯。

@H_403_0@一般来说，父子之间使用服务的方式来通行，是采用事件消息的形式来实现的。

@H_403_0@例如，如下的代码中，父子组件中共享了Service服务，并在各自的类中获取了Service服务的实例，当分别点击父子组件中的按钮时，就能够触发Service服务中的对应的input$以及output$，因为服务是共享的，所以在父子组件中监听对应的服务信息，就能够得到传递的消息。

= new EventEmitter(); output$: EventEmitter = new EventEmitter(); constructor() { } } @Component({ selector: 'child',template: `
@H_403_0@

总结

@H_403_0@以上所述是小编给大家介绍的Angular2 组件交互实例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

angular2组件组件组件组件交互

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作