Angular深拷贝的子组件Input在UI上不能更改 _编程开发

Angular深拷贝的子组件Input在UI上不能更改

创始人

2024-10-29 11:31:32

0次

在使用深拷贝进行数据传输时，可能会遇到子组件的Input不能在UI上更改的问题。这是因为深拷贝会创建一个新的对象，在子组件中修改这个对象的属性值并不会影响原始父组件的对象。解决方法是使用单向数据流，在父组件中更改属性值，然后将更新后的属性值传递给子组件。

代码示例：

在父组件中：

export class ParentComponent implements OnInit {
  originalObject = {name: 'John', age: 30};
  clonedObject: any;

  ngOnInit() {
    this.clonedObject = JSON.parse(JSON.stringify(this.originalObject));
  }

  updateAge() {
    this.clonedObject.age = 35;
  }
}

在父组件的HTML模板中：

在子组件中：

export class ChildComponent implements OnInit {
  @Input() object: any;

  ngOnInit() {
    console.log(this.object); // Output: {name: 'John', age: 30}
  }
}

在子组件的HTML模板中：

Name: {{object.name}}
Age: {{object.age}}

上一篇：Angular生命周期：在Angular初始化之后，如何执行一个JavaScript函数？

下一篇：Angular深拷贝的子组件输入无法在UI上更改

Angular深拷贝的子组件Input在UI上不能更改

相关内容

热门资讯