@Input свойство undefined в angular 2 onInit

Попытка получить значение компонента @Input в конструкторе или ngOnInit. Но он приходит как "undefined" все время.

Я обновил плукер героя с помощью console.log, чтобы показать проблему (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)
  }
}

Что я здесь делаю неправильно?

Ответ 1

Причина, по которой вы получаете undefined в ngOnInit, связана с тем, что в момент инициализации компонента вы фактически не передали объект Hero

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

В этот момент selectedHero не имеет значения в вашем AppComponent и не будет, пока событие click в списке не вызовет метод onSelect

Изменить: Извините, что я действительно не предлагал исправления. Если вы добавите ngIf в my-hero-detail

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

это должно задержать инициализацию компонента my-hero-detail, и вы должны увидеть вывод консоли. Однако это не будет выводиться снова, когда выбранный герой изменится.

Ответ 2

Это происходит потому, что герои загружаются асинхронно, поэтому, когда визуализируется представление первоначально, выбранный герой undefined. Но затем, после выбора, герой передается в представление деталей с определенным значением.

В основном вы видите вызов onInit на основе исходного значения (undefined).

Если вы хотите, чтобы что-то подобное выполнялось после каждого выбора, вы можете изменить его следующим образом:

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

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