@Input özelliği, açısal 2'nin onInit

Question

içinde tanımlanmamıştır. Bileşenin @ Giriş değerini yapıcıda veya ngOnInit öğesinde almayı dener. Ama her zaman "tanımsız" olarak geliyor.

Sorunu (beta açısal) göstermek için hero.conf ile hero plunker'ı güncelleştirdim. 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) 
    } 
} 

yanlış burada ne yapıyorum?

Answer 1

bileşen bu noktada selectedHero anda aslında bir Hero nesne

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

içinde geçmemiş bir sıfırlanır noktada AppComponent hiçbir değeri yoktur çünkü ngOnInit tanımlanmamış alıyoruz nedenidir ve listedeki tıklama olayı, onSelect yöntemini

olarak adlandırıncaya kadar olmaz. Düzenleme: Üzgünüm, aslında bir düzeltme önermedim. Bu my-hero-detail bileşenin başlangıç ​​durumuna geciktirecek olmalı ve konsol çıkışını görmelisiniz bir ngIf

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

my-hero-detail Sizin ekleyin. Bu , alışkanlığı seçtiğinde, seçilen kahraman değiştiğinde yeniden çıkış olur.

Answer 2

Bunun nedeni, kahramanların eşzamansız olarak yüklenmesidir, bu nedenle görünüm başlangıçta oluşturulduğunda, seçilen kahraman tanımsızdır. Fakat sonra bir seçim yapıldıktan sonra, kahraman tanımlı bir değerle ayrıntıların görünümüne aktarılır.

Temel olarak onInit çağrısını yalnızca orijinal değere (undefined) göre görüyorsunuz.

Eğer her seçimden sonra yürütülecek benzer bir şey istiyorsanız, bunu şöyle değiştirebilirsiniz:

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

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