angular - @Input 属性在 Angular 2 的 onInit 中未定义

Question

试图在 constructor 或 ngOnInit 中获取组件的 @Input 值。但它始终以 undefined 的形式出现。

我用 console.log 更新了 hero plunker 以显示问题(beta angular)。 http://plnkr.co/edit/dseNM7OTFi1VNG2Z4Oj5?p=preview

export class HeroDetailComponent implements OnInit {
  constructor(){
    console.log('hero', this.hero)
  }
  public hero: Hero;
  
  ngOnInit() {
    console.log('hero', this.hero)
  }
}

我在这里做错了什么？

Answer 1

你在 ngOnInit 中得到 undefined 的原因是因为在初始化组件时你实际上没有传入 Hero 对象

<my-hero-detail [hero]="selectedHero"></my-hero-detail>

此时 selectedHero 在您的 AppComponent 中没有值，直到列表上的点击事件调用 onSelect 方法

编辑:抱歉，我实际上并没有提供修复。如果将 ngIf 添加到 my-hero-detail

<my-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></my-hero-detail>

这应该会延迟 my-hero-detail 组件的初始化，您应该会看到控制台输出。然而，当所选英雄发生变化时，这不会再次输出。