子向父组件传值
1、@ViewChild（#menu）—将子组件传递给父组件 值、方法
//父组件html子组件标签 <app-menu-list #menu></app-menu-list> //父ts @ViewChild('menu', { static: false }) menu: MenuListComponent; click(){ this.menu.setVisibility("vege", true); }
2、@Output—子组件触发响应，响应内容在父组件中，并在父组件中执行。
Output相当于绑定指令方法，子作用域触发事件执行响应函数，而响应函数方法体位于父作用域，相当于将事件父作用域，在父作用域处理。
//子组件----------map <yz-ngx-map (onMapLoad)="mapload()" ></yz-ngx-map> @Output() onMapLoad: EventEmitter<void> = new EventEmitter(); mapload() {
///当子组件地图加载后，执行父组件函数 this.onMapLoad.emit(); this.onMapLoad.emit(99);//传输变量99 } //父组件----------homePage <app-map (onMapLoad)="onMapLoad()" (onElementChange)="isCalc1 = isCalc2 = false"></app-map>
onMapLoad() {
//父组件的柱状图展示出来
this.siderChange('植被NPP');
this.timeChange(2019, 2019);
}
父向子传值,方法
Input相当于指令的值绑定，无论是单向的(@)还是双向的(=)。都是将父作用域的值“”到子作用域中，然后子作用域进行相关处理。
//父组件的子标签
<app-pre-calc [dataEle]="selProfression.name" [run]="run"></app-pre-calc>
//子组件
@Input("dataEle") dataEle: string;//传值
<button (click)="isLook()">调用父组件的方法</button>
@Input() run:any;//传方法
isLook(){
this.run()
}
父变子也变
set—get=>父组件中的值发生改变时，子组件的值也改变，同时触发方法。
//父组件的子标签-----------vege.ts
<app-map [selProfression]="selProfression"></app-map>
//子组件ts-------------------map.ts
//selProfression
private _selProfression: Profression
@Input()
public set selProfression(selProfression: Profression) {
this._selProfression = selProfression;
//具体逻辑
}
public get selProfression(): Profression {
return this._selProfression;
}