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

【问题标题】：@Input property is undefined in Angular 2's onInit@Input 属性在 Angular 2 的 onInit 中未定义
【发布时间】：2016-03-27 14:04:56
【问题描述】：

试图在constructor 或ngOnInit 中获取组件的@Input 值。但它一直以undefined 的形式出现。

我用 console.log 更新了 hero plunker 以显示问题（beta 角度）。 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)
  }
}

我在这里做错了什么？

【问题讨论】：

嗯，我没有意识到在示例中我们没有立即选择英雄......我很高兴它也不能在 plunker 中工作:) 我在 plunker 中检查了它工作正常。但是在我的代码中它不起作用，但它已初始化......对不起，错误的plunker。我会接受答案，但它不能解决我的问题。
所以问题是我把camelCase属性“inputProperty”放在@Input...而不是“input-property”...奇怪没有意识到..但是在API文档中写像这样。

标签： angular

【解决方案1】：

您在ngOnInit 中未定义的原因是因为在初始化组件时您实际上并没有传入Hero 对象

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

此时selectedHero 在您的AppComponent 中没有任何价值，并且直到列表上的点击事件调用onSelect 方法时才会这样做

编辑：很抱歉，我实际上并没有提供修复。如果您将ngIf 添加到my-hero-detail

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

您应该会延迟my-hero-detail 组件的初始化，您应该会看到控制台输出。但是，当所选英雄发生变化时，这不会再次输出。

【讨论】：

解决我的问题，谢谢。跳出框框思考，你可能会发现一些新的东西
太棒了。这正是我所需要的。
优秀的解决方案。非常感谢，伙计！ :)

【解决方案2】：

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

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

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

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

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

【讨论】：

是的，应该的。
使用 angular5 。错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'未定义'。当前值：'[object Object]'。
@FaizMohamedHaneef 如果您更改该函数中的值，则会发生这种情况。由于 angular 已经检查了所有变量的更改，因此如果您之后在调试模式下更改值（不是在生产中，因为 angular 不会像在调试中那样再次检查），它会给您一个警告。如果您确实需要更改一个值，并且您确定您处理正确，请将其包装在 Timeout 中。

【解决方案3】：

当我在ngOnInit 中未定义输入属性值时，我遇到了相同的行为。 html代码中的*ngIf="selectedHero"语句让我不满意。此外，使用来自@THG's answer 的AfterViewChecked 对我来说不是一个好的解决方案，因为它会定期调用并且当我想更改某些变量时它也会导致警告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
        }
    }
}

希望以后对大家有所帮助。

【讨论】：

if 语句和括号变量在我的情况下不起作用，相反我只是检查了另一个条件。但它奏效了！！谢谢
它工作正常。我不知道他为什么不批准这个。

【解决方案4】：

在ngOninit方法中使用，

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

【讨论】：

有人可以解释为什么这被否决了吗？它在我的单元测试中消除了这个错误。
问题是不要跳过错误，而是找到解决错误的方法

【解决方案5】：

@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
        }
    }
}

【讨论】：