Question

我正在寻找对Angular2中对Observables / Subjects的理解的帮助。我有一个应用程序，我试图显示以下格式的一些数据：

sections = [
    {
        _id: '999'
        name: 'section 1'
        items: [
            {
                name: "item 1.1"
                property1: "value 1.1.1"
                property2: "value 1.1.2"
                property3: "value 1.1.3"
            }
            {
                name: "item 1.2"
                property1: "value 1.2.1"
                property2: "value 1.2.2"
                property3: "value 1.2.3"
            }
        ]
    },
    {
        _id: '888'
        name: 'section 2'
        items: [
            {
                name: "item 2.1"
                property1: "value 2.1.1"
                property2: "value 2.1.2"
                property3: "value 2.1.3"
            }
            {
                name: "item 2.2"
                property1: "value 2.2.1"
                property2: "value 2.2.2"
                property3: "value 2.2.3"
            }
        ]
    }
    .
    .
    .
]

为此，我设置了一个如下所示的组件树：

'data view component'
    |
     --> 'section component'
        |
         --> 'data item component'

其中'数据视图组件'将段的列表保存为名为sectionData $的observable，它被传递到section组件中，如下所示：

<section-component
    *ngFor="let section of sectionData$ | async"
></section-component>

'section-component'托管'数据项组件'，数据传递方式如下：

 <data-item-component
    *ngFor="let item of section.items"
></data-item-component>

当发生更改时，即调用sectionData $ .next（）...整个组件树都会更新，即使更改可能只发生在给定部分中的一个或两个项目上。这可能会非常慢，具体取决于要在屏幕上呈现的数据的复杂性和大小

如何仅在父可观察对象的子对象发生更改时才更新组件？

Answer 1

这就是customTrackBy功能的用武之地。如果您确定您的部分ID是唯一的，请告知Angular按其ID跟踪该项目：

<section-component *ngFor="let section of sectionData$ | async;trackBy:customTrackBy"></section-component>

在data view component内，添加customTrackBy函数：

customTrackBy(index, sec) {
    return sec._id;
}

同样的想法也可以应用于物品。

Plnkr：http://plnkr.co/edit/mG2kYiInXIYsrmRqgajS?p=preview

Answer 2

我会利用Componenet元数据属性“changeDetection”。如果没有任何改变，这将导致Angular 2跳过从组件发送更改。由于您使用的是Observable，因此您还需要利用ChangeDetectorRef对象，这样您就可以告诉Angular 2在从subcribe方法接收数据时组件中发生了一些变化。可以找到更多详细信息here。

角度2可观察的子对象

2 个答案: