Die @ Input-Eigenschaft ist in onInit von Angular 2 undefiniert

Es wird versucht, den @InputWert der Komponente in constructoroder abzurufen ngOnInit. Aber es kommt wie undefinedimmer.

Ich habe den Heldenplunker mit aktualisiert console.log, um das Problem zu zeigen (Beta-Winkel). 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)
  }
}

Was mache ich hier falsch?

Der Grund, warum Sie undefiniert werden, ngOnInitist, dass Sie an dem Punkt, an dem die Komponente initialisiert wird, noch kein HeroObjekt übergeben haben

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

Zu diesem Zeitpunkt selectedHerohat Ihr Wert keinen Wert AppComponentund ruft erst auf, wenn das Klickereignis in der Liste die onSelectMethode aufruft

Bearbeiten: Tut mir leid, dass ich kein Update angeboten habe. Wenn Sie fügen Sie ein ngIfzumy-hero-detail

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

Sie sollten die Initialisierung der my-hero-detailKomponente verzögern und die Konsolenausgabe sehen. Dies wird nicht jedoch wieder ausgegeben , wenn die ausgewählten Helden ändert.

Dies liegt daran, dass die Helden asynchron geladen werden. Wenn die Ansicht also anfänglich gerendert wird, ist der ausgewählte Held undefiniert. Nachdem eine Auswahl getroffen wurde, wird der Held mit einem definierten Wert in die Detailansicht übergeben.

Sie sehen im Grunde nur den onInit-Aufruf basierend auf dem ursprünglichen Wert (undefiniert).

Wenn Sie möchten, dass nach jeder Auswahl etwas Ähnliches ausgeführt wird, können Sie es folgendermaßen ändern:

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

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

Ich habe das gleiche Verhalten festgestellt, als ich den Wert der Eingabeeigenschaft in nicht definiert habe ngOnInit. Die Aussage *ngIf="selectedHero"im HTML-Code hat mich nicht zufrieden gestellt. Darüber hinaus war die Verwendung der AntwortAfterViewChecked von @ THG keine gute Lösung für mich, da sie regelmäßig aufgerufen wird und auch die Warnung auslöst, ExpressionChangedAfterItHasBeenCheckedErrorwenn ich eine Variable ändern möchte (ich wollte keine Problemumgehung verwenden setTimeout). Dies ist meine Lösung für diese Art von Problem:

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

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

Ich hoffe es hilft später jemandem.

In der ngOninit-Methode verwenden,

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