充电器input与output_@input 与@output 的初步理解

@input是用来定义输入的，是接收其他组件传过来的数据的。相当于指令的值绑定，无论是单向的(@)还是双向的(=)。都是将父作用域的值“输入”到子作用域中，然后子作用域进行相关处理。我这个是在写一个地址选择框时的一个公用的组建。

export class InputData {

province:number;

city:number;

area:number;

town:number;

address:string;

}

@output相当于指令的方法绑定，子作用域触发事件执行响应函数，而响应函数方法体则位于父作用域中，相当于将事件“输出到”父作用域中，在父作用域中处理。

@Input() data:InputData;

@Output() areaemit = new EventEmitter();

这是我的输入输出的格式然后areaemit是我的处理输出的名字

export class AddressInfo {

provinceId:number;

//provinceName:string;

cityId:number;

//cityName:string;

areaId:number;

//areaName:string;

townId:number;

//townName:string;

}

这是定义的输出类里面的四个参数

/**

* 获取地址Id

* @param level 1是省，2是市，3是区，4是镇

*

*/

public getArea(level:number){

let areaId:number = 0;

switch(level){

case 2:

areaId =this.data.province;

this.selectAddressInfo.provinceId = areaId;

break;

case 3:

areaId = this.data.city;

this.selectAddressInfo.cityId = areaId;

break;

case 4:

areaId =this.data.area;

this.selectAddressInfo.areaId = areaId;

break;

case 5:

areaId =this.data.town;

this.selectAddressInfo.townId = areaId;

break;

}

this.checkAllSelect();//如果全部选择了，通知父组件

this.manageService.getArea(areaId).subscribe(

res =>{

if(res['errorCode'] == "0"){

switch(level){

case 1://省

this.provinceList = res['data']['areaInfo'];

if(this.data.province > 0){

this.getArea(2);

}

break;

case 2://市

this.cityList = res['data']['areaInfo'];

this.getArea(3);

break;

case 3: //区

this.areaList = res['data']['areaInfo'];

if(this.data.area > 0){

this.getArea(4);

}

break;

case 4: //镇

this.townList = res['data']['areaInfo'];

if( this.data.province >4 && this.data.province<33){

this.getArea(5);

}

break;

}

}else if(res['errorCode'] == "-10000005"){

}else if(res['errorCode'] == "-20000001"){

//goToLogin(this.router);

}else{

this.toptipsService.warn(res['msg'] + "：" + res['errorCode'])

}

},

error => {

this.toptipsService.warn("服务器出现错误，请稍后重试！")

},

() => {

}

);

}

public checkAllSelect(){

if(this.selectAddressInfo.provinceId > 0 && this.selectAddressInfo.cityId > 0&&this.selectAddressInfo.townId>0){

this.areaemit.emit(this.selectAddressInfo);

}

}

在一个检查选择的方法里面把他弹出了。还有前面选择的时候的赋值。这是子组件里面的一部分内容。

然后就是在父组件里面传入.父组件模版的内容

然后这里做了传出数据赋值

public updateArea(selectAddress:AddressInfo){

selectAddress.provinceId = this.data.userInfo.province;

selectAddress.areaId = this.data.userInfo.area;

selectAddress.cityId = this.data.userInfo.city;

selectAddress.townId = this.data.userInfo.town;

}

不过要引入子组件的类

import { AddressInfo } from '../../../../utils/area/area.component'

声明：　这是我刚学Angularjs 然后有很多不足希望大神来指点。

1.我也有很多疑问为什么我不用output输出也能接收到数据啊。(我认为是数据的双向绑定吗)

2.其实我感觉里面代码中也有很多不用的。