Angular7:有没有办法限制同一页面上多个相同组件的作用域？

Question

我在一个页面上放置了多个相同组件，它们都在接收输入。当这些输入中的一个发生变化时，它们都会刷新！有没有办法不让它全部刷新呢？

<tr *ngFor="let map of imgs | keyvalue; index as i;">
    <td><app-preview [file]="map.value"></app-preview></td>
</tr>

组件：

<img *ngIf="src" [src]="src" alt="">

应该向组件发送不同的映射值，但是当一个映射值更改时，所有组件都会刷新，这看起来非常糟糕。

Answer 1

这就是我们应该使用trackedBy函数的场景。

如下所示修改您的代码。

在你的html中，

<tr *ngFor="let map of imgs | keyvalue; index as i; trackBy: trackByFn">
    <td><app-preview [file]="map.value"></app-preview></td>
</tr>

在你的ts文件中

public trackByFn(index, item) {
    if(!item) return null;
    return index;
}

当你的列表更新时，这将避免在dom中重新呈现整个列表。默认的trackBy是使用对象的引用来完成的，并将其更改为trackBy列表的索引，这样整个dom就不会得到更新。所以..。将增强您的性能。

有关更多信息，请查看this