角度2のonInitで@Inputプロパティが定義されていません

Question

コンストラクタまたはngOnInitでコンポーネントの@Input値を取得しようとしています。しかし、それは常に「未定義」となっています。

私は、問題を示すために、console.logでヒーロープランナーを更新しました（ベータ版）。 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

コンポーネントがこの時点selectedHeroで、あなたが実際にHeroオブジェクト

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

に合格していない初期化される時点で、あなたのAppComponentで値を持たないので、あなたがngOnInitで未定義なっている理由は、リストのクリックイベントがonSelectメソッドを呼び出すまで続きます

編集：申し訳ありませんが、私は実際に修正を提供していないことを認識しました。あなたはngIf

my-hero-detailから

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

を追加する場合は、このmy-hero-detailコンポーネントの初期化を遅らせるだろう必要がありますし、コンソール出力が表示されるはずです。このはですが、選択したヒーローが変更されたときに再び出力されます。

Answer 2

ヒーローが非同期に読み込まれるため、ビューが最初にレンダリングされるとき、選択されたヒーローは未定義です。しかし、選択が行われた後、ヒーローは定義された値で詳細ビューに渡されます。

基本的には、元の値（未定義）に基づいてonInit呼び出しが表示されます。

あなたは、各選択後に実行するのに似た何かをしたい場合、あなたはこのようにそれを変更することができます。

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

    ngAfterViewChecked() { 
    console.log('hero', this.hero) 
    } 
}