Angular中如何在父组件ngOnInit内访问子组件@Output输出的事件数据？

问题根本原因 #

Angular父子组件生命周期执行顺序为父组件ngOnInit执行在先，子组件初始化及事件抛出在后。你子组件的dataServiceEvent是在子组件自身ngOnInit执行、初始化表格后才抛出的，此时父组件的ngOnInit早就执行完毕，不可能在父组件ngOnInit中直接获取该事件返回的数据。

实现方案（两种按需选择） #

方案1：回调触发请求（最推荐，适配分页/排序场景） #

子组件的翻页、排序、切换每页条数操作都会触发dataServiceEvent抛出最新的分页排序参数，刚好可以用来触发接口请求，不需要在ngOnInit中手动调用。
修改代码如下：

1. 给tableElements加初始值避免空值报错
2. 打开回调中getListOfDeals的注释，去掉getListOfDeals中排序参数的硬编码覆盖逻辑

// 组件A顶部定义变量时添加初始值
tableElements: any = {
  pageIndex: 0,
  pageSize: 10,
  sortParams: ['name'],
  sortDirs: ['asc']
};

ngOnInit(): void {
  // 不需要在这里调用，第一次请求会由子组件初始化完成后自动触发
}

dataServiceEvent(item: any) {
  this.tableElements = item;
  this.getListOfDeals();
}

private getListOfDeals() {
  this.searchInput = '';
  this.isLoading = true;
  console.log("getting deals")
  this.dealService
    .getAllDeals(
      this.accountId,
      this.transaction.id,
      this.tableElements.pageIndex + 1,
      this.tableElements.pageSize,
      this.searchInput,
      // 去掉原来的硬编码赋值，否则会覆盖子组件传过来的排序参数
      this.tableElements.sortParams,
      this.tableElements.sortDirs
    )
    .pipe(finalize(() => (this.isLoading = false)))
    .subscribe({
      error: (err) => this.notificationService.showError(err),
      next: (res) => {
        this.dealsListData = res.items;
        console.log('res', this.dealsListData);
      },
      complete: noop,
    });
}

方案2：ngOnInit触发首次请求 #

如果一定要在父组件ngOnInit中触发首次请求，可直接复用你传给子组件的tableOptions参数（子组件初始化的表格参数就是从这个输入属性里取的，和子组件第一次抛出的参数完全一致）：

// 你父组件原本就有传给子组件的tableOptions配置，直接用来初始化请求即可
ngOnInit(): void {
  // 用tableOptions的默认参数给tableElements赋值
  this.tableElements = {
    pageIndex: this.tableOptions.pageIndex ?? 0,
    pageSize: this.tableOptions.pageSize ?? 10,
    sortParams: this.tableOptions.sortParams ?? ['name'],
    sortDirs: this.tableOptions.sortDirs ?? ['asc']
  }
  this.getListOfDeals()
}

// 回调仍保留，用来处理后续子组件的翻页、排序操作
dataServiceEvent(item: any) {
  this.tableElements = item;
  this.getListOfDeals();
}

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