父子组件通信

基本概念

Angular 提供了两个装饰器 Input 和 Output， 为父子组件通信提供了方法。
其中，Input 允许父组件向子组件发送数据，而 Output 允许子组件向父组件发送数据。

父组件向子组件发送数据

通过子组件中的 Input，实现子组件获取其父组件数据的功能。

父组件配置项：

// parent-component.component.html

<p style="background-color: cornflowerblue; padding: 20px 0;">
  parent-component works!

  <!-- 子组件：ChildComponentComponent -->
  <!-- childItem：子组件属性 -->
  <!-- parentItem：父组件属性 -->
  <!-- 通过属性绑定把子组件属性绑定到父组件属性上 -->
  <app-child-component [childItem]="parentItem"></app-child-component>
</p>


// parent-component.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.scss']
})
export class ParentComponentComponent implements OnInit {

  // 给父组件属性赋值
  parentItem:string = '我是来自父组件的数据！';

  constructor() { }

  ngOnInit() {
  }

}

子组件配置项：

// child-component.component.html

<p style="background-color: burlywood;">
  child-component works!

  <!-- 展示父组件发送的数据 -->
  <span>{{ childItem }}</span>
</p>

// child-component.component.ts

// 导入装饰器 Input
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss']
})
export class ChildComponentComponent implements OnInit {

  // 装饰子组件属性 childItem
  @Input()
  childItem!: string;

  constructor() { }

  ngOnInit() {
  }

}

监听输入属性（ @Input() 装饰的属性 ）的变化，通常使用钩子函数 ngOnChanges()，具体用法可以参考：组件。

子组件向父组件发送数据

通过子组件中的 Output，实现子组件向其父组件发送数据的功能。

子组件配置项：

// child-component.component.html

<p style="background-color: burlywood;">
  child-component works!

  <br>
  <input type="text" #item>

  <!-- 子组件绑定 click 事件，调用子组件方法 sendChildItemFn -->
  <button (click)="sendChildItemFn(item.value)">Send</button>
</p>


// child-component.component.ts

// 导入装饰器 Output 和自定义事件类 EventEmitter
import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss']
})
export class ChildComponentComponent implements OnInit {

  // 通过 @Output() 装饰，定义事件名称为 sendItemEvent
  // 初始化 EventEmitter 创建自定义事件，定义发送数据的类型为 string
  @Output() sendItemEvent = new EventEmitter<string>();

  constructor() { }

  ngOnInit() {
  }

  // 调用函数 sendChildItemFn 时，触发自定义事件 sendItemEvent
  sendChildItemFn(val: string){
    this.sendItemEvent.emit(val);
  }

}

父组件配置项：

// parent-component.component.html

<p style="background-color: cornflowerblue; padding: 20px 0;">
  parent-component works!
  <br>
  <span>{{ showChildItem }}</span>

  <!-- 在子组件的标签上，绑定子组件的自定义事件 sendItemEvent -->
  <!-- sendItemEvent 事件连接到父组件的函数 parentGetItemFn -->
  <!-- 事件对象 $event 中包含了子组件发送的数据 -->
  <app-child-component (sendItemEvent)="parentGetItemFn($event)"></app-child-component>
</p>


// parent-component.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.scss']
})
export class ParentComponentComponent implements OnInit {

  showChildItem = '';

  constructor() { }

  ngOnInit() {
  }

  // 将子组件的数据赋值给父组件属性 showChildItem 上
  parentGetItemFn(event: string){
    this.showChildItem = event;
  }

}

---

end