最近感觉对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);
});