数据未从Angular中的父组件传递到子组件
Posted
技术标签:
【中文标题】数据未从Angular中的父组件传递到子组件【英文标题】:Data not passing to child component from parent component in Angular 【发布时间】:2022-01-19 17:58:37 【问题描述】:我有几个复选框,我将这些复选框值推送到一个数组中。然后我尝试使用 @Input 装饰器从子组件访问这些数据。但是数据甚至没有传递给子组件(不显示console.log)。你能帮我解决这个问题吗?
父组件 (.ts)
public layers: any[] = [];
layerChange(e:any)
var isChecked = e.target.checked;
var id = e.target.attributes.id.nodeValue;
const index = this.layers.findIndex(el => el.id === id);
const layer =
isChecked: isChecked,
id: id,
if(index > -1)
this.layers[index].isChecked = isChecked;
else
this.layers.push(layer);
console.log(this.layers);
.html
<input id="population" (change)="layerChange($event)" type="checkbox">
<input id="age" (change)="layerChange($event)" type="checkbox">
<app-esri-map [layerChange] = "layers"></app-esri-map>
子组件 (.ts)
@Input() layerChange: Array<any>;
console.log(layerChange)
【问题讨论】:
你能粘贴更多的子组件吗?我不确定你的控制台在哪里。 角度变化检测默认使用对象引用,因此推送到数组或更改数组中的值不会触发任何更改。您需要将layers
设置为一个新实例。
是的,您的控制台日志在哪里,这是您问题中最相关的部分之一。
【参考方案1】:
数组通过引用传递给子节点。
您只是将新项目推送到您的 layers 数组,因此引用保持不变。因此,Angular 的更改检测周期不会被触发,并且 OnChanges 生命周期钩子不会检测到该 @Input 上的任何更改。
每次更改数组时都需要创建一个新实例。或者只是在这些组件之间使用共享服务。这样,父母将把项目推送到数组中,孩子将监听这些变化(使用 Observables)。
【讨论】:
【参考方案2】:改为这样做
public layers: any[] = [];
layerChange(e:any)
var isChecked = e.target.checked;
var id = e.target.attributes.id.nodeValue;
const index = this.layers.findIndex(el => el.id === id);
const layer =
isChecked: isChecked,
id: id,
if(index > -1)
this.layers[index].isChecked = isChecked;
else
this.layers.push(layer);
this.layers = [...this.layers];
console.log(this.layers);
【讨论】:
是的。这对我有用。非常感谢:)以上是关于数据未从Angular中的父组件传递到子组件的主要内容,如果未能解决你的问题,请参考以下文章
如何将 Angular 5 中的点击数据从父组件传递到子组件?
在 React.js 的父组件中使用 react-router 时,如何使用 react context API 将数据从父组件传递到子组件?