父组件向子组件传递数据
父组件:
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;
}
生命周期
ngOnChanges
- 在输入属性 (input)/输出属性 (output)的绑定值发生变化时调用。
ngOnInit
- 在第一次 ngOnChanges
完成后调用。