[解決済み] Angular 2のonInitで@Inputプロパティが未定義である。

質問

コンポーネントの @Input の値を constructor または ngOnInit . しかし、これは undefined となっています。

でヒーロープランカーを更新しました。 console.log で問題を表示するようにしました（ベータ版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)
  }
}

私はここで何を間違えているのでしょうか？

どのように解決するのですか？

で未定義になる原因は ngOnInit で未定義となるのは、コンポーネントが初期化される時点で、実際には 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 コンポーネントの初期化が遅延し、コンソール出力が表示されるはずです。これは ウォント が出力されますが、選択されたヒーローが変更されると再び出力されます。