@input 与@output 的初步理解

Posted 2020-10-13 zgll

@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.其实我感觉里面代码中也有很多不用的。