背景:在angular父子通信对数据的交互是很场景的一个场景,通过简单的记录更加熟悉父子组件通信。
父亲传孩子:
父亲html中:
<app-father [title]=“homeName”>
title: 孩子组件获取数据的依据。
homeName: 父亲传给孩子的数据。
孩子js中:
使用
@Input() title?:string。
就可以获取父亲出传来的数据了。
孩子传给父亲
孩子html中:
@Output() addList = new EventEmitter();
sendDataToFa() {
this.addList .emit(‘孩子的数据发给父亲’);
}
父亲html中
<app-son (addList)=“fatherFun($event)”>
addList: 孩子给父亲传递方法名称。
fatherFun(): 父亲需要定义方法接收孩子传来的数据。
父亲js:
fatherFun(value:any){
// value 就是孩子传给父亲的数据了
}