如何实现角组件间通讯

　　介绍

小编这次要给大家分享的是如何实现角组件间通讯,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

一个角应用一般情况下包含多个组件,而且要让组件互相之间能进行通讯(数据传送),这样才能构成一个有机的完整系统。


下面例举一个实际遇到的情况:

如何实现角组件间通讯

上图页面包含两个组件,“新增班级组件”和“选择教师组件”,在新增班级时需要选择改班级的管理教师,管理教师列表要从数据库中获取。选择好教师后,“选择教师组件”要把选择的教师对象传递回“新增班级组件”,这其中涉及到对象传递称为通讯。


组件之间有几种典型的关系:父子关系,兄弟关系,没有直接关系

如何实现角组件间通讯

父子关系说明:有A, B两个组件(不一定在同一个模块),如果一组件的视图页面中引用了B的选择器标签,则称为B的父组件,或B为的子组件。


了解完组件存在的关系,相应地,组件之间有以下几种典型的通讯方案:

    <李>直接的父子关系:父组件直接访问子组件的公共属性和方法 <李>直接的父子关系:借助于@Input和@Output进行通讯李 <>李没有直接关系:借助于服务单例进行通讯李 <>李利用饼干和localstorage进行通讯李 <>李利用会话进行通讯
    　　李,

<强>直接调用

假设BComponent是AComponent的子组件。

对于有直接父子关系的组件,父组件可以直接访问子组件里面公共型的属性和方法,示例代码片段如下:

& lt; B # child> & lt;/B> 　　& lt;按钮(点击)=癱hild.childFunction()“在调用子组件方法& lt;/button>

显然,子组件B里面必须暴露一个公共型的childFunction方法,就像这样:

 @ViewChild (BComponent)
　　私人bComponent: bComponent;

如果通过@ViewChild注解,父组件直接访问子组件,那么两个组件之间的关系就被固定死了。父子两个组件紧密依赖,谁也离不开谁,不能单独使用了。尽量避免这样做。

<强> @Input和@Output

同样假设bComponent是AComponent的子组件。

我们可以利用@Input装饰器,让父组件直接给子组件传递参数,子组件bComponent上这样写:

@Input () 　　公共标题:字符串;

父组件视图上可以这样设置标题这个参数(这个参数可以是个父组件想要传给子组件的变量或对象等):

& lt; B title=澳愫肁ngular"祝辞& lt;/B>

前面是父组件→子组件传递数据,过程相对简单、下面是子组件→父组件传数据,过程较复杂。

@Output的本质是事件机制,我们可以利用它来监听子组件上派发的事件,子组件上这样写:

@Output () 　　公共选择=new EventEmitter<要传给父组件的对象类型祝辞();

EventEmitter:在角中组件通过定义EventEmitter事件弹射器的方式由子组件向父组件发送数据。

选中的是一个事件、触发选择事件的方式如下:

this.selected.emit(对象),

在子组件上定义一个方法onChange(),使子组件视图能够调用该方法触发选择事件:

onChange () { 　　this.selected.emit(要传给父组件的对象); 　　}

父组件可以这样监听选择事件:

& lt; B(选择),# 10122;=皁nTeacherSelected(事件)美元①“祝辞& lt;/B>

使用我们刚刚在子组件中定义的@Output()选择

①方法名需要在父组件C层中定义,用于接收子组件传过来的事件,而参数名可以随性起,但我们一般为起名事件以美元为示此处为该组件的一个弹射器。

看完这篇关于如何实现角组件间通讯的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。

如何实现角组件间通讯