angular—父子组件通信

一、传递数据

1. 父组件向子组件传递

• 父组件：HTML文件中
  • 通过 [子组件中的变量名]='父组件需要向传递的数据' 把值传入到子组件；
• 子组件：JS文件中
  • 通过 @input 子组件中的变量名 装饰器接收父组件传递的数据；
• 应用场景：在父组件中的数据发生变化，子组件需要更新，在ngOnChanges()生命周期函数中监控数据的变化，如果父组件中的数据发生变化，对子组件进行一些处理。

2. 子组件向父组件传递

• 父组件：HTML文件中
  • (event)="fatherMethod($event)" 监听event事件并在子组件中数据发生变化时调用父组件中的fatherMethod方法，将$event(子组件的数据)传入到父组件对应的变量中。
• 子组件：js文件中
  • 1. 通过EventEmitter类触发自定义事件，再通过Output装饰器输出，即@Output() event = new EventEmitter();
  • 2. 在event事件中通过emit发送数据，即this.event.emit('data')。

二、调用组件的方法

1. 父组件调用子组件中的方法

• 给子组件起别名(#...)后可直接调用子组件中的方法； 未完待续······