angular - ngonchanges - ngoninit

La propiedad @Input no está definida en onInit de angular 2

Question

Intentando obtener el valor @Input del componente en constructor o ngOnInit. Pero viene como "indefinido" todo el tiempo.

Actualicé el hero plunker con console.log para mostrar el problema (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)
  }
}

¿Qué estoy haciendo mal aquí?

Answer 1

En el uso del método ngOninit,

ngOnInit() {
    if(this.hero) 
        console.log(''hero'', this.hero);
}

Answer 2

Encontré el mismo comportamiento cuando tengo indefinido el valor de la propiedad de entrada en ngOnInit . La declaración *ngIf="selectedHero" en código html no me satisfizo. Además, usar AfterViewChecked de la respuesta de @ THG no fue una buena solución para mí, porque llama periódicamente y también causa la advertencia ExpressionChangedAfterItHasBeenCheckedError cuando quiero cambiar alguna variable (no quería usar la solución setTimeout ). Esta es mi solución para este tipo de problema:

export class MyComponent implements OnChanges {
    @Input() myVariable: any;

    ngOnChanges(changes: SimpleChanges) {
        if (changes[''myVariable'']) {
            let variableChange = changes[''myVariable''];
            //do something with variableChange.currentValue
        }
    }
}

Espero que ayude a alguien más tarde.

Answer 3

Esto se debe a que los héroes se cargan de forma asíncrona, por lo que cuando la vista se muestra inicialmente, el héroe seleccionado no está definido. Pero luego de hacer una selección, el héroe pasa a la vista de detalles con un valor definido.

Básicamente solo está viendo la llamada onInit basada en el valor original (indefinido).

Si desea ejecutar algo similar después de cada selección, puede modificarlo así:

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

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

Answer 4

La razón por la que no está definido en ngOnInit es porque en el punto donde se inicializa el componente, no ha pasado realmente un objeto Hero

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

En este punto, selectedHero no tiene ningún valor en su AppComponent y no lo hace hasta que el evento de clic en la lista llame al método onSelect

Editar: Lo siento, me di cuenta de que en realidad no ofrecí una solución. Si agrega un ngIf a my-hero-detail

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

debería retrasar la inicialización del componente my-hero-detail y debería ver la salida de la consola. Sin embargo, esto no volverá a aparecer cuando cambie el héroe seleccionado.