Angular 5/TypeScript中@Input()传值失效：父子组件传值显示undefined

嘿，我来帮你搞定这个问题！你遇到的undefined其实是两个小细节没处理好，咱们一步步来修复：

问题1：父组件未完成属性绑定 #

你在子组件里用@Input()声明了接收category的入口，但父组件的模板里压根没把值传过去！子组件相当于空等，自然输出undefined。

修改父组件模板：
把原来的<app-menu-list></app-menu-list>改成带属性绑定的写法，用Angular的方括号语法把父组件的变量传递给子组件：

<div class="container">
  <div class="row">
    <app-menu-list [category]="category"></app-menu-list>
  </div>
</div>

问题2：生命周期执行顺序的时机差 #

就算完成了绑定，你可能还是会遇到undefined——因为Angular组件的生命周期执行顺序是：
父组件constructor → 子组件constructor → 子组件ngOnInit → 父组件ngOnInit

你在父组件的ngOnInit里给category赋值，这时候子组件的ngOnInit已经跑完了，所以子组件在ngOnInit里打印的还是初始的undefined。

这里给你两种解决思路：

方法A：提前父组件的赋值时机 #

把父组件的category赋值移到constructor里，这样子组件初始化前就有值了：

export class MenuComponent implements OnInit {
  category: string;
  constructor() { 
    this.category = "Human"; // 移到constructor中提前赋值
  }
  ngOnInit() {
    // 这里保留其他初始化逻辑即可
  }
}

方法B：子组件监听输入属性变化 #

如果父组件的category是异步获取的（比如从接口请求数据），没法提前在constructor赋值，那就在子组件里用ngOnChanges钩子监听category的变化：

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

export class MenuListComponent implements OnInit, OnChanges{
  @Input() category: string;
  
  constructor() { }
  
  ngOnInit() {
    // 这里无需打印，时机不对
  }

  ngOnChanges(changes: SimpleChanges) {
    // 当category发生变化时触发
    if (changes['category']) {
      console.log(this.category); // 这里能拿到最新的有效值
    }
  }
}

验证修改 #

按照上面的步骤调整后，子组件就能正确接收父组件传递的category值，控制台不会再输出undefined啦！

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