Angular中如何通过事件将子组件的totalJobsLength传递给父组件展示

实现方案（Angular父子组件场景最简洁方案：@Output() + EventEmitter） #

步骤1：修改子组件 ChildComponent.component.ts

导入对应API，定义输出事件，拿到值的同时推送至父组件：

// 顶部新增导入
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  // 保持原有组件配置不变
})
export class ChildComponent {
  // 定义输出事件，父组件通过监听该事件获取值
  @Output() totalJobsLengthChange = new EventEmitter<number>();
  totalJobsLength = 0;

  // 原有逻辑修改如下
  this.search.setup({
    // .....原有代码
    return this.service
      .searchJobs(projectid, payload)
      .pipe(
        tap(
          (page) => {
            this.totalJobsLength = page.totalElements;
            // 新增：拿到值后主动推送给父组件
            this.totalJobsLengthChange.emit(this.totalJobsLength);
          }
        ),
        map((page) => ({
          // ....原有代码
        }))
      );
    }
  });
}

步骤2：修改父组件 ParentsComponent.component.ts

新增存储变量和接收子组件值的处理方法：

@Component({
  // 保持原有组件配置不变
})
export class ParentsComponent {
  // 存储子组件传过来的总任务数
  totalJobsInParent = 0;

  // 接收子组件传值的回调方法
  updateTotalJobs(count: number) {
    this.totalJobsInParent = count;
  }
}

步骤3：修改父组件模板 ParentsComponent.component.html

绑定子组件的输出事件，同时在标签头展示数值：

<p-tabPanel [header]="'All(' + totalJobsInParent + ')'">   
  <ldd-child (totalJobsLengthChange)="updateTotalJobs($event)"></ldd-child>
</p-tabPanel>

如果不需要初始显示(0)，可以调整header的拼接逻辑，比如[header]="'All' + (totalJobsInParent ? '(' + totalJobsInParent + ')' : '')"即可。 #

补充：如果有多层跨组件共享该数值的需求，也可以通过公共服务+BehaviorSubject实现全局状态共享，当前父子直接通信的场景用上述方案成本最低。

内容的提问来源于stack exchange，提问作者lona bin