angular父子组件通信的示例分析
这篇文章主要介绍angular父子组件通信的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
用到的api
Input - 子组件中定义可接受的属性，可以用来父组件给子组件传递数据
Output - 子组件中定义输出的属性，该属性需要是 EventEmitter 的事件类型，用来通知父组件做出相应的操作
EventEmitter - 用在带有 @Output 指令的组件中，以同步或异步方式发出自定义事件，并通过订阅实例来为这些事件注册处理器。
简单的例子
列表渲染子组件，点击子组件通知父组件进行操作
person.ts
exportinterfacePerson{name:string;age:number;sex:string;}
父组件
import{Component,OnInit}from'@angular/core';import{Person}from'./person';@Component({selector:'app-comp-parent',template:``,})exportclassCompParentComponentimplementsOnInit{personList:Person[]=[{name:'张三',age:21,sex:'男'},{name:'李四',age:25,sex:'男'},{name:'李莉',age:20,sex:'女'},];constructor(){}ngOnInit():void{}onItemClick(item:Person){console.log('click-person:',item);}}
子组件
import{Component,EventEmitter,Input,OnInit,Output}from'@angular/core';import{Person}from'./person';@Component({selector:'app-comp-child',template:`Name:{{data.name}}Age:{{data.age}}Sex:{{data.sex}}
`,})exportclassCompChildComponentimplementsOnInit{@Input()data!:Person;@Output()itemClick=newEventEmitter();constructor(){}ngOnInit():void{}}
