typescript 更改@Input组件对象不会反映在父组件中

ruarlubt 于 2022-12-05 发布在 TypeScript

关注(0)|答案(3)|浏览(137)

我有这个组件：

@Component({
    selector: 'child'
})
export class ChildComponent {
    @Input() childObject: ChildObject;

    changeObject(newObject: ChildObject){
        childObject = newObject;
    }
}

当我调用changeObject时，我的ChildComponent反映了这些更改，但是我的ParentComponent（它包含ChildComponent）并没有用这些更改来更新。
例如：如果在我的ParentComponent模板中有类似{{parent.childObject.name}}的东西，这个值保持不变。
我尝试使用childObject = JSON.parse(JSON.stringify(newObject));，但它没有帮助。我猜这是对象引用更改的问题，所以我添加了一个方法copy(newObject: ChildObject)，它在我的ChildObject类中逐个属性地进行复制，但当我在changeObject方法中调用它时，我得到了以下错误：
错误类型错误：_this.childObject.copy不是函数。

更新：子对象类

export class ChildObject {
  constructor(
    public name: string // , ...
  ) { }

  copy(childObject: ChildObject) {
    this.name = childObject.name;
    // ...
  }
}

typescript

来源：https://stackoverflow.com/questions/53259705/changing-an-input-component-object-isnt-reflected-in-parent-component

3条答案

按热度按时间

dtcbnfnu1#

这将不起作用，您应该在此处使用service或@Output，如果组件之间只有这种通信，我建议在此处使用@Output

@Component({
    selector: 'child'
})
export class ChildComponent {
    @Input() childObject: ChildObject;
    @Output() onChildObjectChange = new EventEmitter<ChildObject>();
    changeObject(newObject: ChildObject){
        childObject = newObject;
        this.onChildObjectChange.emit(newObject);
    }
}

父组件****Html

<child (onChildObjectChange)="updateObject($event)"></child>

updateObject(newObject: ChildObject) {
  childObject = newObject
}

赞(0）回复(0）举报 2022-12-05

w8f9ii692#

编辑：直接赋值将不起作用，因为它会将原始对象引用替换为新对象引用

this.childObject = newObject; // Will not work

但是，对现有对象的任何更新都应该有效

this.childObject.someProperty = newObject; // should work

Object.assign(this.childObject, newObject);  // should work since it will assign the merge to the first object

应该可以工作，因为在传递输入时对象是作为引用传递的。我在您发布的代码中看到的唯一问题是您应该将childObject作为this引用。childObject

@Component({
    selector: 'child'
})
export class ChildComponent {
    @Input() childObject: ChildObject;

    changeObject(newObject: ChildObject){
        this.childObject = newObject;
    }
}

这应该行得通。虽然我不会这样做。这可以用一种更干净的方式来做。

赞(0）回复(0）举报 2022-12-05

r1zhe5dt3#

您可以通过在子项上添加ChangeDetectionStrategy.OnPush来更改该值

@Component({
    selector: 'child',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
    @Input() childObject: ChildObject;

    changeObject(newObject: ChildObject){
        childObject = newObject;
    }
}

只要在子组件component上有任何事件触发，它就会更新您的对象。这种情况下，子组件和父组件changeDetection都将发生，因此它将更新您的对象
希望您期待的是这样的结果-编码快乐！！

赞(0）回复(0）举报 2022-12-05

我来回答

typescript 更改@Input组件对象不会反映在父组件中

3条答案

相关问题

热门标签

最新问答