Angular实战记录--主从组件数据传递

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/WRian_Ban/article/details/84573022

父组件向子组件传递数据

父组件：
performanceTableData是父组件.component.ts里面的变量，PITableData 是需要在子组件.component.ts里接收的变量名
父组件.component.html:

<app-indicators [PITableData]="performanceTableData"></app-indicators>

子组件：
使用装饰器@Input接收PITableData
子组件.component.ts：

export class PerFormanceIndicatorComponent implements OnInit{
	@Input() PITableData: any;
	···
}

注意：特别是父组件会改变数据的情况下，一定要在子组件里使用ngChange监听
所以子组件.component.ts需要这样：

import { Input, OnInit, OnChanges， SimpleChanges ···  } from '@angular/core';// 引入OnChanges, SimpleChanges 模块

···
export class PerFormanceIndicatorComponent implements OnInit, OnChanges {// 不要忘了还需要OnChanges
	@Input() PITableData: any;// 接收数据
	···
	 ngOnChanges(changes: SimpleChanges): void {// 与SimpleChanges配套食用
	   if (this.PITableData) {
	     	···
	     }
	     ···
	   }
	   ···
  }

---

子组件向父组件传递数据

子组件：
需要使用@Output装饰器，和EventEmitter模块
子组件.component.ts：

import { ···Output, ··· , EventEmitter } from '@angular/core';
···
export class PerFormanceIndicatorComponent implements OnInit{
	···
	@Output() checkedBack = new EventEmitter(); // 实例化，使用checkedBack来调用emit
	···
	someFunction(): void {
	    ···
	    this.checkedBack.emit(someData);//把需要传递到父组件的数据填充进来，someData
	    ···
	}
}

父组件：
父组件.component.html里绑定回调函数checkedBack，checkedPIBack则是父组件.component.ts里的接收数据的函数
父组件.component.html:

<app-indicators  ···  (checkedBack)="checkedPIBack($event)" ></app-indicators>

父组件.component.ts:

  checkedPIBack(data: any) {
    this.performanceTableData = data;
  }

---

父组件调用子组件方法

为子组件添加一个局部变量AppIndicators，支持在当前模板的数据绑定和事件绑定表达式中访问子组件的实例。
父组件.component.html:

<app-indicators···#AppIndicators···></app-indicators>

父组件.component.ts:

import {···ViewChild } from '@angular/core';
···
import { PerFormanceIndicatorComponent } from './indicators/indicators.component';
···

export class Step1Component implements OnInit{
···
// 把组件视图查询（AppIndicators）的第一个结果绑定到Step1Component 的 AppIndicators属性上。
@ViewChild('AppIndicators') AppIndicators: PerFormanceIndicatorComponent;
···
// 调用
someFunc () :void {
	// 可以访问子组件的数据和方法
	this.AppIndicators.anyFunc()
	this.AppIndicators.anyVarData;
}