个人博客 个人博客

2020 记录精彩的程序人生

目录
了解Angular 中 @Input 和 @Output
/  

了解Angular 中 @Input 和 @Output

<app-child  [myparent]="myparentValue"  [myparentClick]="myparentClicks"  (childEvent)="getChildClick()"></app-child>

@Input:父组件给子组件传递数据/方法

  1. 父组件html页,给子组件传递值:[myparent]="myparentValue"
  2. [myparent] === 子组件定义接收的参数,"myparentValue" === 父组件ts页定义的值
  3. 在子组件ts页,通过@Input把myparent输入进来,然后在页面显示

@Output:子组件通过@Output触发父组件的方法

  1. 子组件html添加一个按钮 (click)="sendParentClick()"
  2. 子组件引入实例化 @Output() childEvent = new EventEmitter();
  3. 子组件通过 childEvent 实例给父组件广播数据:this.childEvent.emit('我是子组件数据');
  4. 父组件引入子组件中,定义接收事件,(childEvent)="getChildClick()"
  5. childEvent === 子组件EventEmitter实例,getChildClick() === 父组件ts页的方法