父子组件传值

子向父组件传值

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;
  }