Angular 16父组件无法向第二个子组件传递数据问题排查

你的场景核心问题是异步加载的父组件数据更新后，子组件未感知到变化：ngOnInit仅在组件初始化时执行一次，而inboxRowsQuantity是父组件ngOnInit中异步获取的，子组件初始化完成后数据才返回，因此ngOnInit里打印的始终是初始值0。以下是具体修复方案：

1. 用ngOnChanges监听输入属性变化 #

在childInbox组件中实现OnChanges接口，每次输入属性更新时都会触发逻辑：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-child-inbox',
  templateUrl: './child-inbox.component.html'
})
export class ChildInboxComponent implements OnChanges {
  @Input() inboxRowsQuantity = 0;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['inboxRowsQuantity']) {
      console.log('最新行数:', changes['inboxRowsQuantity'].currentValue);
      // 这里处理最新数据的业务逻辑
    }
  }
}

2. 给@Input设置setter #

通过setter方式实时捕获输入值的变化，适合需要即时处理数据的场景：

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

@Component({
  selector: 'app-child-inbox',
  templateUrl: './child-inbox.component.html'
})
export class ChildInboxComponent {
  private _inboxRowsQuantity = 0;

  @Input()
  set inboxRowsQuantity(value: number) {
    this._inboxRowsQuantity = value;
    console.log('最新行数:', this._inboxRowsQuantity);
    // 数据更新后的逻辑处理
  }

  get inboxRowsQuantity(): number {
    return this._inboxRowsQuantity;
  }
}

3. 检查变更检测策略（若使用OnPush） #

如果childInbox组件设置了ChangeDetectionStrategy.OnPush，需确保父组件更新数据时触发变更检测：

• 若数据是引用类型（对象/数组），更新时返回新的引用（比如用扩展运算符...创建新对象）
• 手动触发：在父组件注入ChangeDetectorRef，数据获取完成后调用cdr.detectChanges()

4. 验证输入绑定的变量名一致性 #

最后确认父组件模板的绑定变量和子组件@Input的变量名完全匹配：
父组件模板：

<app-child-inbox [inboxRowsQuantity]="inboxRowsQuantity"></app-child-inbox>

子组件@Input必须对应：

@Input() inboxRowsQuantity = 0;

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