Angular5父组件值传递给子组件出现undefined错误求助

嘿，我来帮你搞定这个问题！你遇到的undefined错误，根源是没有正确使用Angular的属性绑定语法，咱们一步步来修正：

问题出在哪？ #

你在Dashboard组件模板里写的 <app-skill-list type="type"></app-skill-list>，其实是把字符串 "type" 传给了Skill组件的@Input() type，而不是Dashboard组件里定义的this.type变量。而且因为没有用Angular的属性绑定语法，子组件根本拿不到父组件里赋值的"Agent"值，所以console输出就是undefined。

具体修正步骤 #

1. 修改Dashboard模板的绑定方式
   必须用方括号[]包裹输入属性，这样Angular才会把它解析成父组件的变量，而不是静态字符串：

   <div class="container">
     <div class="row">
       <app-skill-list [type]="type"></app-skill-list>
     </div>
   </div>
   

   这里[type]对应Skill组件的@Input() type，右边的"type"就是Dashboard组件里的this.type变量，这样就能正确传递"Agent"值了。

2. 可选：给子组件输入属性加默认值（增强鲁棒性）
   为了避免后续可能出现的undefined，可以给Skill组件的type设置一个默认值：

   export class SkillComponent implements OnInit{
     @Input() type: string = ''; // 默认空字符串
     constructor() { }
     ngOnInit() {
       console.log(this.type); // 现在会正常输出"Agent"啦
     }
   }
   

补充说明 #

Angular的组件生命周期顺序是父组件的ngOnInit先执行，然后才是子组件的ngOnInit，所以你在Dashboard的ngOnInit里给type赋值"Agent"的时机是没问题的，只要绑定语法正确，子组件就能拿到这个值。

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