La proprietà @Input non è definita in angular 2's onInit

Question

Tentativo di ottenere il valore @Input del componente in costruttore o ngOnInit. Ma sta venendo "indefinito" tutto il tempo.

Ho aggiornato il plunker dell'eroe con console.log per mostrare il problema (beta angolare). 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) 
    } 
} 

Che cosa sto facendo male qui?

Answer 1

Il motivo che stai ricevendo indefinito in ngOnInit è perché nel punto in cui il componente viene inizializzato non si è effettivamente passato in un oggetto

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

Hero A questo punto selectedHero non ha alcun valore nella vostra AppComponent e non fino a quando l'evento click sull'elenco chiama il metodo onSelect

Modifica: Spiacente mi sono reso conto che in realtà non ho offerto una correzione. Se si aggiunge un ngIf per my-hero-detail

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

si dovrebbe questo ritarderà l'inizializzazione del componente my-hero-detail e si dovrebbe vedere l'uscita della console. Questo non sostituirà ma tornerà quando l'eroe selezionato cambia.

Answer 2

Questo perché gli eroi vengono caricati in modo asincrono, quindi quando la vista viene visualizzata inizialmente, l'eroe selezionato non è definito. Ma dopo aver effettuato una selezione, l'eroe viene passato alla vista dettagli con un valore definito.

In pratica, si sta appena visualizzando la chiamata onInit in base al valore originale (non definito).

Se si desidera qualcosa di simile da eseguire dopo ogni selezione, è possibile modificarlo in questo modo:

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

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