在父组件给子组件传值时,因为绑定的变量为一个数组,在父组件中对数组进行了push操作,绑定的数组从[]变为了length为5的一个数组,但我惊讶的发现这些变化竟然一次都没有触发子组件中的ngOnChange生命周期钩子。在我查找了相关资料后找到了该问题的关键。
因为开发使用的样式库为NGZorro,我在常见问题中找到了这样的一段
NGZorro常见问题截图
数组不会触发变更检测。 那么如何才能让绑定的数组触发变更检测呢?
答案很简单,可以使用ES6的扩展运算符 三个点(...)
// 修改前的数组操作
this.selectedNode.forEach(item => {
this.selectedIds.push(item.id);
}
// 由于selectedNode的length为5 此时selectedIds变化了五次
// 但是一次都没有触发子组件的ngOnChange钩子
// 修改后的操作如下
this.selectedNode.forEach(item => {
this.selectedIds = [...this.selectedIds, item.id];
}
// 注意:selectedIds需要赋初值为[] 或某数组
// 此时将触发子组件的ngOnChange生命周期钩子