Question

在更新子组件上的对象实例时遇到一些麻烦。这是对象类：

class MyObject {
    elementList : Array<any> = [
        { id: 1, text: "Hello world"}
    ];
}

主要成分：

export class PageComponent implements ... {
    myObject: any = new MyObject();

    constructor(...) {}

    reload() {
        this.getDataFromAPI.subscribe(data => {
            this.myObject.elementsList = data;
        });
    }
}

主要组件模板：

<div>
    <child-component [list]="myObject"></child-component>
</div>

子组件：

export class ChildComponent implements OnChanges, ... {
    @Input list: any;

    constructor(...) {}

    ngOnChanges(changes: SimpleChanges) {
        if (changes.list) {
            this.list = changes.list.currentValue;
        }
    }
}

子组件模板在myObject.elementsList中显示元素列表。

如果我尝试从PageController推送/更改elementsList中的元素，则它们不会在子级中更新（但是如果我在PageController中实现所有代码，则效果很好）。我发现，如果我用新实例替换PageController中的整个实例，它也会更新子实例，但是我想知道是否有更好的方法来实现这一点。

我不想在每次需要刷新列表时重新实例化该对象。如何更新实例数据并将其反映给孩子？

Answer 1

Angular将自动更新您的媒体资源“列表”。您不需要调用ngOnChanges lifeciclehook

Angular5绑定和更新子组件中的实例

1 个答案: