@Input属性在Angular 2的onInit中未定义

尝试@Input在constructor或中获取组件的值ngOnInit。但是它一直undefined都在来。

我用 console.log用来以显示此问题（β角）。 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)
  }
}

我在这里做错了什么？

之所以未定义，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组件的初始化，并且应该看到控制台输出。这不会然而，再次输出所选择的英雄变化时。

这是因为英雄是异步加载的，因此在最初渲染视图时，未定义所选英雄。但是随后进行选择后，英雄将以定义的值传递到详细信息视图中。

基本上，您只是看到基于原始值（未定义）的onInit调用。

如果您希望在每次选择后执行类似的操作，则可以这样修改它：

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

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

当我在中未定义Input属性值时，我遇到了相同的行为ngOnInit。*ngIf="selectedHero"html代码中的语句使我不满意。此外，使用AfterViewChecked从@ THG的回答是不是对我来说是很好的解决方案，因为它定期调用并且还导致警告ExpressionChangedAfterItHasBeenCheckedError的时候我想改变一些变量（我不想用的解决方法setTimeout）。这是我针对此类问题的解决方案：

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

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

希望以后对您有所帮助。

在ngOninit方法中使用

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

@Barabas解决方案在我的情况下不起作用。我最终用这个

export class HeroDetailComponent implements OnChanges {
    @Input() hero: any;

    ngOnChanges(changes: SimpleChanges){
        if(changes.hero && changes.hero.currentValue){
            let currentHero = changes.hero.currentValue;
            //use currentHero
        }
    }
}