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

Question

试图在构造函数或ngOnInit中获取组件的@Input值.但它总是以"未定义"的形式出现.

我用console.log更新了英雄plunker以显示问题(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)
  }
}

我在这做错了什么？

Answer 1

您未定义的原因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组件的初始化,你应该看到控制台输出.然而,当所选英雄改变时,这不会再次输出.

Answer 2

这是因为英雄是异步加载的,所以当视图最初渲染时,所选的英雄是未定义的.但是在做出选择之后,英雄将被传递到具有定义值的细节视图中.

您基本上只是根据原始值(未定义)看到onInit调用.

如果您想在每次选择后执行类似的操作,可以像这样修改它:

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

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

Answer 3

当我在输入属性值未定义时,我遇到了相同的行为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
        }
    }
}

我希望以后可以帮助别人.