angular2 父子组件的通信

最近感觉对angular2的使用方法总结的太少了，稍微梳理了组件通信的相关内容，在此记录一下：

1.通过数据绑定的方式---这种方式有单向和双向的两种，即父组件->子组件，和父组件<->子组件，首先说一下第一种情况：

第一种（父组件->子组件）：

在父组件使用自定义的指令，如<myCustomComponent  [pass]='myPassValue' ></myCustomComponent>；

然后在子组件中通过Input方法，即可将数据获取到；

第二种（父组件<->子组件）：

这种方式只需在父组件中使用双向绑定<myCustomComponent  [(pass)]='myPassValue' ></myCustomComponent>；

然后在子组件中通过Output，可以定义一个EventEmitter的变量childValue，将childValue.emit()即可；

2.angular2提供了父组件访问子组件属性和方法的机制，不通过数据绑定的方式，完成父组件对子组件的属性和方法的访问控制：

一种是通过父组件的模板：

使用本地变量的方式访问（这个方式父组件的类是获取不到子组件的属性和方法），

使用方法为在父组件中定义本地变量myLoaclpara，<myCustomComponent
#myLoaclpara></myCustomComponent>；

然后就可以在模板中使用myLoaclpara访问子组件的属性和方法了

<h2>{{myLoaclpara.childValue}}</h2>

<button
(click)="myLoaclpara.childFunction()"></button>

第二种是在父组件中使用ViewChild：

在父组件中通过ViewChild把子组件引入，然后创建一个子组件的实例，使用这个实例就可以在父组件的类中访问子组件的属性和方法,

@ViewChild(ChildComponent)

;

private
childComponent:ChildComponent;

使用childComponent即可访问子组件的属性和方法；

3.还有一种是通过访问来实现通信，简单的描述就是通过中间的服务作为媒介，实现子组件和父组件的通信，注意一点就是，这个服务要处于最顶层，相当于全局变量，使用时要谨慎。

这个方法就是使用rxjs的一个类库Subject，应用方法也很简单：(以TS举例)

定义通信模块communicate.ts

import Subject from Rxjs;

public subject: Subject;

public submitMessage(data: any){

this.subject.next(data);

}

export class

Communicate(){}

定义发送消息模块client.ts

public subject:
Communicate;//实例化Communicate

this.subject.submitMessage(mydate);//这样就可以把数据发射出去

定义接受消息模块server.ts

public subject:
Communicate;//实例化Communicate

this.subject.subscribe((res)=>{

//这里就是发射出去的数据

console.log(res);

});