Angular子组件参数传递失败：传入值未生效问题排查

问题描述 #

在Angular项目中尝试向子组件传递参数，但子组件未接收到预期值：父组件的参数显示正常，子组件中读取的输入参数始终是初始值0。

父组件代码 #

app.component.ts #

export class AppComponent {
  title = 'hidato';
  public minRowsCells: number = 1;
  public maxRowsCells: number = 10;
  public bigestNumber: number = 100;
}

app.component.html #

minrows = {{minRowsCells}}
maxrows = {{maxRowsCells}}
bignumber = {{bigestNumber}}
<button class="btn btn-success" type="submit"
    (click)="onDisplayMatrix()">Prepare Matrix</button> 

<div *ngIf="displayMatrix">
    <app-matrix [one]="minRowsCells" [two]="maxRowsCells"
    [three]="bigestNumber"></app-matrix>
</div>

模板输出：minrows = 1 maxrows = 10 bignumber = 100，父组件值显示正常。

子组件代码（matrix.component.ts） #

export class MatrixComponent implements OnInit {
  @Input('one') MatminRowsCell: number = 0;
  @Input('two') MatmaxRowsCell:  number = 0;
  @Input('three') MatbiggestNumber:  number = 0;

  constructor() { 
    console.log ("before first for loop this is maxrowscell " + this.MatmaxRowsCell);
  }
}

控制台输出：before first for loop this is maxrowscell 0，预期MatmaxRowsCell应为10，但参数未成功传递。

问题原因及解决方案 #

• 核心问题：你在组件的constructor中读取输入参数，但此时Angular尚未完成输入属性的绑定。Angular组件生命周期里，构造函数是最早执行的阶段，此时输入参数还未被赋值，只能读取到你设置的初始值0。
• 修复方案：将读取输入参数的逻辑移到ngOnInit钩子函数中——这个钩子会在Angular完成输入属性绑定后执行；如果需要监听参数变化，也可以使用ngOnChanges钩子：

修改后的子组件代码示例 #

export class MatrixComponent implements OnInit {
  @Input('one') MatminRowsCell: number = 0;
  @Input('two') MatmaxRowsCell:  number = 0;
  @Input('three') MatbiggestNumber:  number = 0;

  constructor() { 
    // 构造函数中不要读取输入参数，此时绑定未完成
  }

  ngOnInit(): void {
    console.log("OnInit阶段读取maxrowscell: " + this.MatmaxRowsCell);
    // 你的循环逻辑放在这里执行即可
  }
}

额外建议：保持输入属性命名的一致性（比如父组件用maxRowsCells，子组件对应命名为maxRowsCells，避免MatmaxRowsCell这类易混淆的命名），同时确保子组件已在父组件所在模块中正确声明或导入。

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