@input与@output的初步理解
@input是⽤来定义输⼊的，是接收其他组件传过来的数据的。相当于指令的值绑定，⽆论是单向的(@)还是双向的(=)。都是将⽗作⽤域的值“输⼊”到⼦作⽤域中，然后⼦作⽤域进⾏相关处理。我这个是在写⼀个地址选择框时的⼀个公⽤的组建。
export class InputData {
province:number;
city:number;
area:number;
town:number;
address:string;
}
@output相当于指令的⽅法绑定，⼦作⽤域触发事件执⾏响应函数，⽽响应函数⽅法体则位于⽗作⽤域
中，相当于将事件“输出到”⽗作⽤域中，在⽗作⽤域中处理。
@Input() data:InputData;
@Output() areaemit = new EventEmitter<any>();
　这是我的输⼊输出的格式然后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 =wn;
wnId = areaId;
break;
}
this.checkAllSelect();  //如果全部选择了，通知⽗组件
Area(areaId).subscribe(
res =>{
if(res['errorCode'] == "0"){
switch(level){
case 1:  //省
this.provinceList = res['data']['areaInfo'];
if(this.data.province > 0){
}
break;
case 2:  //市
output的反义词
this.cityList = res['data']['areaInfo'];
break;
case 3:  //区
this.areaList = res['data']['areaInfo'];
if(this.data.area > 0){
}
break;
case 4:  //镇
if( this.data.province >4 && this.data.province<33){
}
break;
}
}else if(res['errorCode'] == "-10000005"){
}else if(res['errorCode'] == "-20000001"){
//uter);
}else{
}
},
error => {
},
() => {
}
);
}
public checkAllSelect(){
if(this.selectAddressInfo.provinceId > 0 && this.selectAddressInfo.cityId > 0&&wnId>0){
it(this.selectAddressInfo);
}
}
  在⼀个检查选择的⽅法⾥⾯把他弹出了。还有前⾯选择的时候的赋值。这是⼦组件⾥⾯的⼀部分内容。然后就是在⽗组件⾥⾯传⼊.⽗组件模版的内容
<app-area [data] = "data.userInfo" (areaemit) = "updateArea($event)"></app-area>
  然后这⾥做了传出数据赋值
public updateArea(selectAddress:AddressInfo){
selectAddress.provinceId = this.data.userInfo.province;
selectAddress.areaId = this.data.userInfo.area;
selectAddress.cityId = this.data.userInfo.city;
}
  不过要引⼊⼦组件的类
import { AddressInfo } from '../../../../utils/area/areaponent'
声明：　这是我刚学Angularjs 然后有很多不⾜希望⼤神来指点。
1.我也有很多疑问为什么我不⽤output输出也能接收到数据啊。（我认为是数据的双向绑定吗）
2.其实我感觉⾥⾯代码中也有很多不⽤的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。