Question

我有这个成分：

@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中调用它时方法，出现此错误：ERROR TypeError: _this.childObject.copy is not a function。

更新：ChildObject类

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

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

Answer 1

这将不起作用，您应该在这里使用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>

ts

updateObject(newObject: ChildObject) {
  childObject = newObject
}

Answer 2

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

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;
    }
}

这应该有效。尽管我不会这样。可以通过一种更清洁的方式来完成此操作。

Answer 3

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

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

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

只要子component上发生任何事件触发，这都会更新您的对象，因为子组件和父组件changeDetection都将发生，因此它将更新您的对象

希望您期待这样的事情-编码愉快！！

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

3 个答案: