如何初始化@Input？答案

【问题标题】：How to initialize @Input?如何初始化@Input？
【发布时间】：2019-12-12 20:00:49
【问题描述】：

我试着这样做：

  @Input() data: any[] = [];

在 ngOnInit 里面我看到了undefined：

 ngOnInit() {
    console.log(this.data);
  }

所以，在下面的代码中，当我尝试获取长度时出现错误：return this.data.length;

因为它是未定义的。

为什么默认初始化不起作用？

@Input() data: any[] = [];

【问题讨论】：

这在默认情况下确实有效，您应该会在日志中看到 []。问题是第一次传递给子组件时，父组件中的值很可能是未定义的。

标签： angular typescript angular-lifecycle-hooks

【解决方案1】：

您需要使用 OnChanges 角度指令。

export class AppComponent implements OnChanges {
    ...

    ngOnChanges(changes: SimpleChanges) {
        this.data = changes.data.currentValue;   // fetch the current value
        console.log(this.data);
    }

    ...
}

更多关于这个指令的信息可以在docs找到。

在 Angular（重新）设置数据绑定输入属性时做出响应。方法接收当前和上一个属性的 SimpleChanges 对象价值观。

在 ngOnInit() 之前以及每当一个或多个数据绑定输入时调用属性变化。

【讨论】：

在ngOnChanges 中做什么？这？ this.data = changes; ?
您可以通过this.data = changes.currentValue获取新值。您可以在 changes 对象上执行 console.log 以查看其其他属性。
伙伴你能告诉我们你的 html 代码和将数据传递给你的子组件的组件吗？您可以收到类似 changes.data.currentValue 的更改。
您确定changes.currentValue; 包含this.data 的更改吗？不是休息变量？
是的，你的回复是空的吗？还是你确定有数据？

【解决方案2】：

要接收更改，请执行以下操作：

ngOnChanges(changes: SimpleChanges) {
  if (changes.data.currentValue) {
    // Do Something with that data
  }
}

【讨论】：