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