@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 =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);
		}
	}

　　在一個檢查選擇的方法里面把他彈出了。還有前面選擇的時候的賦值。這是子組件里面的一部分內容。

然后就是在父組件里面傳入.父組件模版的內容

  <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;
		 selectAddress.townId = this.data.userInfo.town;
	}

　　不過要引入子組件的類

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

聲明：　這是我剛學Angularjs 然后有很多不足希望大神來指點。

1.我也有很多疑問為什么我不用output輸出也能接收到數據啊。（我認為是數據的雙向綁定嗎）

2.其實我感覺里面代碼中也有很多不用的。