Angular中如何将子组件的增量操作同步更新到父组件的计数器

实现逻辑 #

Angular 父子组件跨级通信场景下，子组件通过@Output装饰器定义自定义事件，更新值后通过EventEmitter将新值抛出，父组件监听该自定义事件即可接收更新后的值同步自身状态。

代码修改步骤 #

1. 调整增量子组件（plus.component.ts）代码 #

• 修正EventEmitter泛型为数字类型，匹配计数变量类型
• 增量操作完成后触发自定义事件抛出最新计数值
  修改后完整代码：

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

@Component({
  selector: 'app-plus',
  templateUrl: './plus.component.html',
  styleUrls: ['./plus.component.css']
})
export class PlusComponent implements OnInit {
  @Input() count: number;
  @Output() countUpdatePlus = new EventEmitter<number>();

  constructor() { }

  ngOnInit(): void {
  }

  onPlus() {
    this.count ++;
    this.countUpdatePlus.emit(this.count);
  }
}

2. 调整父组件（app.component.html）代码 #

在子组件标签上监听子组件抛出的countUpdatePlus自定义事件，接收抛出的新值同步给父组件的currentCount变量：

<h1>{{title}}</h1>
<p>Count: {{currentCount}}</p>
<app-plus [count]="currentCount" (countUpdatePlus)="currentCount = $event"></app-plus>

3. 可选优化：父组件变量类型优化 #

将父组件currentCount的any类型调整为number，符合TypeScript类型规范：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'complicatedAngularCounter';
  currentCount: number = 0;
}

修改完成后点击子组件的增量按钮，父子组件的计数值就会同步更新。

内容的提问来源于stack exchange，提问作者Javier Hernandez